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译 者 序 


Web 前 端 开 发 技术 是 从 网 页 制作 演变 而 来 的 。 早 期 的 网 页 以 文 
字 和 图 片 等 静态 内 容 为 主 。 进 入 21 世纪 以 来 ， 互 联网 进入 Web 2.0 
时 代 ， 单 纯 的 静态 网 页 已 经 不 能 满足 需要 ， 以 各 种 富 媒体 为 基础 的 
交互 式 网 页 为 用 户 提供 了 更 好 的 体验 。 网 页 开发 技术 随 之 分 化 为 前 
端 开发 技术 和 后 端 开 发 技术 ， 网 页 开发 人 员 也 分 工 为 前 端 开 发 人 员 
和 后 端 开 发 人 员 。 前 端 开 发 人 员 和 后 端 开 发 人 员 所 从 事 的 工作 他 异 。 
前 端 开 发 人 员 主 要 使 用 JavaScript 编写 具有 交互 功能 的 代码 ， 并 使 
用 CSS 美化 页 面 , 而 后 端 开发 人 员 使 用 服务 器 端 语言 编写 用 于 呈现 
页 面 的 代码 。 

本 书 主 要 介绍 前 端 开发 人 员 所 使 用 的 一 些 流行 工具 ， 如 Angular、 
Bootstrap、NuGet、Bower、webpack、gulp 和 Azure 等 ， 以 及 这 些 
工具 与 Visual Studio 2017 的 组 合 应 用 。 本 书 通过 丰富 的 示例 ， 深 
入 浅 出 地 介绍 各 类 工具 的 使 用 方式 。 本 书 不 是 关于 前 端 开发 的 入 
门 书籍 ， 需 要 读者 具有 HTML、JavaScript、CSS、C#( 或 VB.NET)、 
ASPNET MVC 和 Web API 等 基础 知识 。 

本 书 主要 由 杜 静 、 歼 富 江 、 李 博 翻 译 ， 参 与 本 书 翻译 的 还 有 周 
浩 、 李 海 莉 、 张 民 垒 、 岁 赛 、 周 云 户 、 秦 富 童 、 训 学 军 、 庞 训 龙 、 
孔 德 强 、 张 祥 虎 、 刘 琳 、 刘 宇 等 。 本 书 部 分 术语 生僻 ， 译 者 们 在 翻 
译 过 程 中 查阅 、 参 考 了 大 量 中 英文 资料 。 当 然 ， 限 于 水 平和 精力 有 
限 ， 翻 译 中 的 错误 和 不 当 之 处 在 所 难免 ， 我 们 非常 希望 得 到 读者 的 
积极 反馈 以 便 更 正和 改进 。 

感谢 本 书 的 作者 ， 于 字里行间 感受 他 的 职业 精神 和 专业 素养 总 


译 者 序 


是 那么 令 人 愉悦 ; 感谢 清华 大 学 出 版 社 给 予 我 们 从 事 本 书 翻译 工作 
和 学 习 的 机 会 ; 感谢 清华 大 学 出 版 社 的 编辑 们 , 他 们 为 本 书 的 翻译 、 
校对 投入 了 巨大 的 热情 并 付出 了 很 多 心血 ,没有 他 们 的 帮助 和 鼓励 ， 
本 书 不 可 能 顺利 付 梓 。 

最 后 ， 和 希望 读者 通过 阅读 本 书 能 够 早日 掌握 Web 前 端 开 发 技 
术 ， 增 强 Web 应 用 程序 开发 能 力 ! 


作者 简介 


Simone Chiaretta( 现 居 比 利 时 布鲁塞尔 ) 是 一 位 网 页 架构 师 和 开 
发 者 ， 他 乐于 分 享 自己 20 多 年 来 在 ASPNET Web 开发 和 其 他 Web 
技术 方面 的 开发 经 验 和 知识 。Simone 成 为 ASPNET 领域 微软 MVP 
已 有 8 年， 撰写 了 儿 本 关于 ASPNET MVC 的 书籍 (包括 Wrox 出 版 
的 Beginning ASPNET MVC 1.0 和 What'’s New in ASPNET MVC 2, 以 
及 Syncfusion 出 版 的 OWIN Succinctly 和 ASPNET Core Succinctly)， 
并 为 在 线 开发 者 门户 (例如 Simple Talk) 做 出 了 贡献 。Simone 还 与 他 
人 共同 创立 了 意大利 ALT.NET 用 户 组 ugialt.NET, 并 且 是 在 米兰 召 
开 的 许多 会 议 的 共同 组 织 者 。 

读者 可 在 Simone 的 博客 http://codeclimber.net.nz 上 阅读 他 的 想 
法 和 开发 技巧 。 

在 不 编写 代码 和 博客 文章 或 是 不 参与 全 球 .NET 社区 活动 时 ， 
Simone 喜欢 研究 Arduino( 一 种 开源 硬件 )、 无 人 机 和 水 下 机 器 人 ， 
并 且 正 在 接受 培训 ， 以 在 2018 年 完成 他 的 第 一 台 “ 钢 铁 侠 ”。 他 是 
在 布鲁塞尔 工作 的 众多 外 籍 专家 中 的 一 员 ， 在 那里 他 领导 欧盟 理事 
会 (欧盟 的 执政 机 构 之 一 ) 公 共 网 站 的 开发 团队 。 


技术 编辑 简介 


Ugo Lattanzi 是 一 位 微软 认证 的 ASPNET MVP， 擅 长 企业 级 应 
用 程序 开发 , 重点 关注 Web 应 用 程序 、 面 向 服务 的 应 用 程序 以 及 以 
可 伸缩 性 为 首要 任务 的 环境 。 他 精通 ASPNET MVC、 Node.jjs、 Azure 
等 技术 ， 目 前 是 Technogym( 泰 诺 健 ) 公 司 的 首席 软件 架构 师 ， 曾 担 
任 MTV 的 技术 经 理 和 一 些 意大利 大 公司 的 顾问 。 他 还 在 技术 社区 
扮演 积极 角色 ， 在 众多 会 议 、 图 书 出 版 商 、 报 纸 、 网 络 广播 和 论坛 
中 担任 技术 作家 、 编辑 或 演讲 者 。 他 还 是 位 于 米兰 的 Web.NET 欧洲 
会 议 的 共同 组 织 者 。 


致谢 


首先 感谢 我 的 女友 Signe， 感 谢 她 的 支持 ， 并 忍耐 这 个 项 目 夺 走 
我 大 量 的 空闲 时 间 。 如 果 没 有 她 的 支持 和 祝福 ， 本 书 就 不 可 能 面世 。 

然后 ， 我 想 感谢 Wiley/Wrox 的 编辑 小 组 。 感 谢 Jim Minatel 帮 
助 描绘 本 书 背 后 的 原始 理念 并 启动 该 项 目 。 感谢 Kelly Talbot， 他 在 
书稿 的 编辑 和 改进 本 书 的 语言 和 可 读 性 方面 做 了 终 良 置疑 的 出 色 工 
作 ， 并 且 在 由 于 本 书 所 涵盖 的 技术 发 生根 本 性 变化 ， 需 要 多 次 重 写 
时 ， 他 一 直 推 动 和 激励 着 我 。 

此 外 ， 非 常 感谢 技术 编辑 Ugo Lattanzi， 他 帮助 我 发 现 了 一 些 
技术 缺陷 ， 并 使 本 书 总 体质 量 改进 很 多 。 

除了 直接 参与 本 书 编写 的 人 员 , 还 要 感谢 ASPNET 团队 , 首先 
要 感谢 他 们 创建 了 这 样 一 个 卓越 框架 ， 其 次 是 感谢 他 们 在 本 书 早期 
阶段 帮助 我 把 握 框 架 的 发 展 方向 。 尤 其 要 感谢 Bertrand Le Roy、Scott 
Hunter 和 Scott Hanselman， 他 们 为 我 提供 即将 发 布 的 软件 版 本 的 最 

特别 感谢 Mads Kristensen 为 本 书 撰写 序言 , 并 始终 帮助 我 解决 
将 前 端 功能 集成 到 Visual Studio 2017 中 的 有 关 问 题 。 

还 要 感谢 Jason Imison， 他 帮助 我 更 好 地 理解 OmniSharp 在 VS 
Code 中 的 角色 ; 感谢 Juri Strumpflohner， 他 帮助 我 解决 了 一 些 与 
Angular 有 关 的 问题 。 

最 后 ， 我 还 要 感谢 同事 和 经 理 Gunter 对 我 的 支持 和 审 稿 。 
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随 着 一 个 又 一 个 新 浏览 器 版 本 的 发 布 ，Web 正成 为 一 个 日 益 强 
大 的 平台 。 未 来 的 新 特性 对 于 早期 的 引入 者 可 用 ， 而 传统 特性 已 经 
成 熟 ， 可 供 大 规模 采用 。 这 个 不 断 增长 的 HTML、CSS 和 Java 工具 
箱 正 在 不 断 加 速 发 展 并 且 没 有 任何 减缓 下 来 的 迹象 。 实 际 上 ， 它 
的 增长 是 如 此 快速 ,以 至 于 需要 专用 工具 一 一 例如 webpack 和 gulp， 
才能 充分 利用 这 些 新 特性 。 

新 的 工作 职位 名 称 “前 端 工 程 师 ” 体 现 了 开发 现代 浏览 器 应 用 
程序 所 需 的 知识 量 ， 而 这 一 职位 几 年 前 还 闻所未闻 。 

除了 Web 平台 方面 的 新 进展 ， 服 务 器 端 技术 也 在 不 断 进化 。 为 
给 终端 用 户 和 Web 开发 人 员 提 供 最 佳 体验 , 服务 器 端 平台 必须 极为 
快速 、 安 全 、 跨 平台 、 可 向 云端 扩展 ， 并 且 拥 有 强大 的 工具 。 

多 数 Web 应 用 程序 均 由 运行 在 浏览 器 中 的 客户 端 代码 和 运行 
在 一 台 或 多 台 服 务 器 上 的 服务 器 端 代码 组 成 ， 要 成 为 一 名 割 智 的 开 
发 人 员 ， 必 须 掌 握 足 够 的 服务 器 端 和 客户 端 技术 ， 而 这 是 一 个 巨大 
挑战 ， 因 为 到 底 多 少 才 足 够 ， 而 又 到 底 应 在 学 习 中 投入 多 少时 间 ? 

一 种 更 简单 的 方式 是 选择 正确 的 框架 和 工具 集 作为 开发 应 用 
程序 的 基础 。 框 架 有 用 ， 因 为 它们 通常 能 将 复杂 的 平台 特性 包装 成 
易 用 的 组 件 ， 因 此 Web 开发 人 员 能 够 专注 于 编写 应 用 程序 的 逻辑 ， 
而 不 必 纠 缠 于 运用 浏览 器 或 服务 器 平台 所 需 的 连接 细节 。 

选择 正确 的 框架 至 关 重 要 。 可 选项 很 多 ,但 有 儿 个 已 经 表现 出 
特别 适合 于 开发 现代 Web 应 用 程序 。ASPNET Core 作为 服务 器 端 
应 用 程序 框架 ，Angular 作为 客户 端 框架 就 是 一 个 绝妙 的 组 合 。 


VIll 


Web 前 端 开发 一 一 使 用 ASP.NET Core、Angular 和 Bootstrap 


Bootstrap 则 能 确保 应 用 程序 界面 在 所 有 浏览 器 和 设备 类 型 上 都 能 
赏心悦目 。 

在 本 书 中 ，Simone 出 色 地 展示 了 这 些 框架 如 何 互 补 , 工具 如 何 
提供 舒适 的 开发 体验 。 本 书 提供 使 用 最 新 颖 强大 的 客户 端 /服务 器 技 
术 开发 Web 应 用 程序 的 实用 方法 ; 在 迅速 变化 的 Web 开发 世界 中 ， 
拥有 本 书 实 属 一 件 幸 事 。 


一 一 Mads Kristensen 
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前 


曾几何时 ， 后 端 开发 人 员 和 前 端 开发 人 员 从 事 着 迎 异 的 工作 。 
后 端 开 发 人 员 使 用 服务 器 端 语言 编写 用 于 呈现 页 面 的 代码 ， 前 端 开 
发 人 员 则 使 用 JavaScript 编 写 具有 一 定 交 互 功能 的 代码 , 并 使 用 CSS 
美化 Web 页 面 。 

几 年 之 前 ， 随 着 单 页 面 应 用 程序 (SPA) 的 登场 ，JavaScript 不 再 
局 限于 增加 “一 定 ” 的 交互 性 ， 还 能 构建 应 用 程序 本 身 。 后 端 开发 
人 员 必 须 扩展 自己 的 技能 储备 ， 以 纳入 前 端 开发 人 员 的 典型 工具 ， 
例如 特定 的 JavaScript 框架 ， 以 及 CSS 的 基础 运用 。 

本 书 的 目标 是 阐释 前 端 开发 人 员 的 常用 工具 ， 以 及 如 何 有 效 地 
将 它们 与 ASPNET Core MVC 组 合 运 用 。 


为 何 Web 开 发 需要 通晓 多 种 语言 的 开发 人 员 


在 日 常生 活 中 ,“ 多 语言 者 ”(polyglot) 是 指 了 解 并 能 使 用 多 种 
语言 的 人 ， 他 们 不 需要 精通 双语 (或 多 语 )， 但 能 较 熟练 地 使 用 第 二 
种 或 更 多 种 语言 。 

何谓 多 语言 开发 人 员 ? 是 指 一 名 了 解 超过 一 种 (编程) 语言 或 框 
架 ， 能 在 同一 个 程序 中 使 用 它们 的 开发 人 员 。 

从 工行 业 发 端 之 日 开始 ,应 用 程序 主要 是 使 用 一 种 编程 语言 编 
写 的 ,笔者 个 人 是 从 C 开始 的 ,然后 转向 Visual Basic, 在 Cold Fusion 
上 着 陆 ， 使 用 过 JavaScript 早期 版 本 (在 客户 端 和 服务 器 端 均 用 过 )， 
进行 了 一 点 Java 开发 ， 最 终 固定 在 .NET 平台 上 ， 但 每 段 时 间 里 只 
使 用 一 种 编程 语言 。 


Web 前 端 开 发 一 一 使 用 ASPNET Core、Angular 和 Bootstrap 


那 时 是 大 型 企业 级 框架 的 时 代 ， 广 商 试图 向 他 们 的 语言 或 框架 
中 塞 入 应 用 程序 可 能 需要 的 一 切 特性 。 微 软 曾经 试图 将 开发 人 员 与 
Web 实际 使 用 的 语言 HIML 和 JavaScript 隔 离开 来 ,推出 了 ASPNET 
Web Forms 和 ASPNET Ajax 框架 。 如 果 读 者 回顾 自己 在 IT 行业 的 
经 历 ， 可 能 会 找到 许多 类 似 的 例子 。 

不 过 最 近 出 现 了 一 种 新 趋势 , 走向 相反 的 方向 , IT 业界 认识 到 ， 
或 许 有 的 语言 比 其 他 语言 更 适 于 完成 某 些 特定 任务 ， 人 们 使 用 多 种 
语言 开发 应 用 程序 ， 而 非 试图 强行 用 一 种 语言 包 打 天 下 。 

现在 我 们 已 经 统一 了 “多 语言 开发 人 员 ” 一 词 的 定义 ， 接 下 来 
让 我 们 看 看 ， 作 为 一 名 多 语言 开发 人 员 有 什么 优势 。 


工 欲 善 其 事 ， 必 先 利 其 器 : 在 工作 中 选择 合适 的 工具 


多 语言 开发 的 第 一 个 也 是 最 重要 的 好 处 是 能 够 选择 完成 工作 
的 最 适合 工具 ， 而 不 必 因 为 语言 或 框架 不 支持 某 个 指定 功能 而 不 得 
不 做 出 妥协 。 

例如 ， 使 用 微软 Ajax 框架 时 ， 将 受 限 于 它 提 供 的 功能 ， 而 直接 
使 用 JavaScript， 则 可 拥有 该 语言 的 全 部 灵活 性 。 

作为 一 名 Web 开发 人 员 , 必须 了 解 HIML 语言 ,但 只 要 使 用 Visual 
Studio 的 开发 界面 , 仅 拖 忠 工 具 箱 中 的 工具 , 即 可 构建 Web 应 用 程序 。 
显然 ， 此 时 无 法 像 直 接 编写 HTML 一 般 ， 拥 有 彻底 的 控制 力 。 

所 以 ， 在 某 种 程度 上 ， 每 个 Web 开发 人 员 都 是 多 语言 开发 人 员 。 

另 一 个 例子 是 Sass 在 Visual Studio 2015 中 的 集成 。 几 年 前 Ruby 
社区 提出 了 CSS 样式 预 处 理 的 创意 ， 微 软 将 其 原始 版 本 集成 到 其 
IDE 中 ， 而 Sass 正 是 预 处 理 CSS 样式 的 合适 工具 。 


他 山 之 石 : 交叉 思维 的 优势 


通晓 多 种 语言 的 第 二 个 好 处 是 能 从 厂商 和 开源 社区 在 其 他 语 
言 的 工作 中 获取 灵感 ， 在 无 法 直接 使 用 时 ， 能 够 改造 或 开发 适合 自 
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己 的 版 本 。 

ASPNET MVC 是 这 方面 的 一 个 绝 佳 例 子 。 十 年 前 ， 当 时 流 
行 的 语言 是 Ruby, 这 要 归功 于 其 简单 的 Web 框架 Ruby on Rails， 
它 建 立 在 模型 -视图 -控制 器 模式 之 上 。.NET 开发 人 员 社 区 从 中 获 
得 灵感 ， 并 开始 同样 基于 MVC 模式 构建 .NET Web 框架 。 这 导致 
微软 构建 了 ASPNET MVC 框架 ， 该 框架 是 本 书 介绍 的 主要 内 容 
这 二 
居安思危 : 扩展 你 的 安乐 窜 


如 果 不 只 考虑 技术 方面 ， 使 用 多 种 语言 和 框架 还 带 来 了 一 项 额 
外 益处 : 它 会 迫使 你 走出 现 有 的 “安乐 窜 ”， 使 你 的 适应 性 更 强 ， 并 
打破 始终 循 规 蹈 算 地 工作 带 来 的 厌烦 情绪 。 训 不 奇怪 ， 有 许多 开发 
人 员 对 尝试 新 事物 犹豫 不 决 ， 并 且 更 喜欢 使 用 他 们 最 熟悉 的 工具 、 
框架 和 语言 ， 尽 管 这 样 做 会 牺牲 灵活 性 和 控制 能 力 。 但 如 果 你 正在 
阅读 这 本 书 ， 可 能 不 是 其 中 之 一 。 因 此 ， 请 准备 好 在 本 书 的 其 余部 
分 ， 学 习 源 自 Microsoft .NET 领域 之 外 的 新 语言 和 框架 。 一 开始 ， 
你 会 走出 你 的 “安乐 帘 ”。 而 当 学 习 完 成 时 ， 你 会 发 现 “ 安 乐 窜 ” 已 
经 变 得 更 大 、 更 具 回报 。 


本 书 读者 对 象 


本 书 的 目标 读者 是 拥有 ASPNET MVC 知识 (无 论 是 最 新 版 本 还 
是 早期 版 本 的 框架 ) 的 人 员 的 Web 开发 人 员 ， 以 及 希望 学 习 使 用 前 端 
开发 中 流行 工具 和 框架 的 人 员 。 此 外 ， 本 书 也 可 以 作为 已 经 采用 某 
些 前 端 工具 和 框架 ， 但 希望 通过 Visual Studio 2017 引入 的 集成 功能 
更 高 效 地 使 用 它们 的 开发 人 员 的 指南 。 
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Web 前 端 开 发 一 一 使 用 ASPNET Core、Angular 和 Bootstrap 


本 书 涵盖 的 内 容 


本 书 主要 介绍 使 用 ASPNET Core MVC 进行 前 端 开发 。 除 概述 
微软 的 最 新 框架 外 ， 还 涵盖 一 些 最 受 欢迎 的 前 端 框 架 和 工具 ， 如 
Angular、Bootstrap、NuGet、Bower、webpack、gulp 和 Azure 等 。 

除 框 架 外 ， 本 书 还 展示 了 Visual Studio 2017 中 面向 前 端 开发 的 
新 特性 ， 以 及 如 何不 使 用 该 软件 ,而 改 用 标准 文本 编辑 器 (例如 Mac 
OS X 上 的 Visual Studio Code) 开 发 ASPNET Core MVC 应 用 程序 。 

这 并 不 是 一 本 面向 初学 者 的 书籍 ， 所 以 笔者 假设 读者 已 经 掌握 
HTML、JavaScript 和 CSS 的 基础 知识 ， 了 解 C# 或 VB.NET( 请 记 住 
所 有 示例 都 将 使 用 C# 编 写 ), 并 且 使 用 过 ASPNET MVC 和 Web API。 


本 书 的 组 织 结构 


为 帮助 读者 确定 这 本 书 是 否 适合 自己 ， 下 面 将 简要 解释 本 书 的 

结构 和 每 章 的 内 容 。 

e 第 1 章 “ASP.NET Core MVC 的 新 变化 ”介绍 使 用 ASP.NET 
Core、ASP.NET Core MVC 以 及 .NET 中 的 所 有 新 功能 和 新 
开发 方法 。 对 于 那些 已 经 了 解 ASP.NET MVC 最 新 版 本 的 读 
者 来 说 ， 可 通过 该 章 进行 复习 ; 对 于 新 人 而 言 ， 可 通过 该 章 
来 简单 了 解 这 个 最 新 版 本 。 

e 第 2 章 “ 前 端 开 发 者 工具 集 ”: 开始 探索 前 端 开发 人 员 的 世 
界 ， 介 绍 使 用 的 工具 类 别 ， 并 介绍 每 类 工具 和 框架 中 的 佼 
佼 者 。 

e 第 3 章 “Angular 简 析 ”: 介绍 Google 的 JavaScript 框架 
Angular， 阐 释 其 中 的 主要 概念 ， 以 及 Visual Studio 2017 附 
带 的 新 的 Angular 工具 。 
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前 


第 4 章 “Bootstrap 入 门 ”: 介 绍 Twitter 的 CSS 框架 Bootstrap， 
并 展示 如 何 使 用 它 构建 自 适应 网 站 。 该 章 还 讨论 Less( 一 种 
CSS 预 处 理 语言 )， 以 及 它 与 Visual Studio 2017 的 集成 。 

第 5 章 “ 使 用 NuGet 和 Bower 管理 依赖 关系 ”: 管理 所 有 
前 端 和 服务 器 端的 组 件 可 能 是 件 非常 痛苦 的 工作 , 但 幸运 的 
是 ， 存 在 一 些 组 件 管理 器 ， 能 用 于 大 大 简化 工作 。 可 使 用 
NuGet 工具 管理 .NET 服务 器 端 依赖 关系 ， 而 在 客户 端 使 用 
Bower。 该 章 介绍 如 何 与 Visual Studio 2017 结合 使 用 这 些 
工具 ， 以 及 如 何 打包 库 文 件 ， 以 便 在 公司 内 部 共享 或 与 外 
界 共享 。 

第 6 章 “ 使 用 gulp 和 webpack 构建 应 用 程序 ”: 介绍 gulp 
和 webpack， 这 是 两 种 可 使 用 JavaScript 进行 编程 的 构建 系 
统 。 该 章 还 将 介绍 它们 与 Visual Studio 2017 的 集成 ， 以 及 
ASP.NET 开发 中 使 用 的 一 些 常用 秘诀 。 

第 7 章 “ 部 署 ASPNET Core”: 应 用 程序 准备 就 绪 后 ， 即 
可 进行 部 署 。 该 章 使 用 Azure 展示 集成 了 测试 、 构 建 和 部 署 
操作 的 持续 流程 。 

第 8 章 “ 非 Windows 环境 中 的 开发 ”: .NET Core 堆栈 的 一 
个 主要 特性 是 它 也 可 在 Linux 和 Mac 操作 系统 上 运行 ,微软 
开发 了 一 个 跨 平 台 的 IDE， 但 也 有 其 他 选择 。 该 章 将 介绍 如 
何在 Mac 上 完成 所 有 ASP.NET 开发 。 

第 9 章 “ 综 合 运用 ”: 本 书 的 最 后 一 章 将 所 有 概念 融会 贯通 ， 
详解 构建 现代 化 、 响 应 式 网 站 所 需 的 所 有 步骤 ， 包 括 通过 
OAnuth 与 第 三 方 服务 和 认证 相 集成 。 
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学 习 本 书 需要 准备 的 条 件 


这 本 书 中 有 很 多 示例 ， 因 此 体验 它 的 最 好 方法 就 是 在 电脑 上 亲 
自 试 一 试 ,为 此 , 需要 安装 Windows 7/8/10 操作 系统 和 Visual Studio 
2017 社区 版 。 

ASPNET Core MVC 也 可 以 在 Windows、Mac OS XX 或 Linux 上 
的 任何 文本 编辑 器 中 开发 。 微 软 还 开发 了 一 款 名 为 Visual Studio 
Code 的 跨 平 台 文本 编辑 器 。 在 第 8 章 中 学 习 在 Windows 之 外 进行 
开发 时 需要 使 用 该 工具 。 当 然 也 可 以 使 用 任何 其 他 兼容 的 文本 编辑 
器 ， 但 使 用 的 命令 和 操作 界面 与 Visual Studio Code 中 的 不 同 。 


约定 


为 了 帮助 读者 准确 掌握 学 习 内 容 ， 获 得 最 大 收益 ， 本 书 使 用 了 


一 些 约定 。 
警告 
包含 与 前 后 文 直接 相关 的 重要 、 不 可 遗忘 的 信息 。 
注意 
用 于 指示 对 当前 讨论 内 容 的 注释 、 提 示 、 技 巧 、 旁 白 等 信息 。 
代码 使 用 两 种 格式 : 


对 于 大 多 数 示例 代码 使 用 不 突出 显示 的 等 宽 字 体 。 
使 用 粗 体 强调 该 代码 在 当前 上 下 文中 特别 重要 ,或 体现 其 与 前 
文 代码 片段 的 差异 。 
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中 


源 代码 


在 完成 本 书 中 的 示例 时 ， 可 以 选择 手动 输入 所 有 代码 ， 也 可 以 
使 用 本 书 附带 的 源 代码 文件 。Wrox 图 书 使 用 的 所 有 源 代码 均 可 从 
www.wrox.com 下 载 ， 有 具体 到 本 书 的 代码 下 载 链接 则 位 于 以 下 网 址 
的 Download Code( 下 载 代码 ) 选 项 卡 中 : 

www.wiley.com/go/frontenddevelopmentasp.netmvce6 

你 也 可 以 通过 ISBN 在 www.wrox.com 上 搜索 图 书 (本 书 的 
ISBN 为 978-1-119-18131-6) 以 查找 代码 。 要 获得 所 有 当前 Wrox 
书籍 的 完整 代码 下 载 列 表 , 请 访问 www.wrox.com/dynamic/books/ 
download.aspx。 

www.wrox.com 上 的 大 部 分 代码 都 以 .ZIP、.RAR 归档 或 适用 相 
应 平台 的 类 似 归 档 格 式 进行 压缩 。 下 载 代码 后 ， 只 需要 使 用 相应 的 
压缩 工具 对 其 进行 解压 缩 即 可 。 

另外 ， 也 可 扫描 本 书 封底 的 二 维 码 下 载 源 代 码 。 


注意 
由 于 许多 书籍 名 称 相似 ， 你 可 能 会 发 现 使 用 ISBN 进行 搜索 最 
简单 ， 本 书 英文 版 的 ISBN 是 978-1-119-18131-6。 


我 们 尽 一 切 努 力 确 保 文本 或 代码 中 没有 错误 。 但 毕 竞 人 非 圣 
贤 ， 难 免 会 出 现 错误 。 如 果 在 我 们 的 某 本 书 中 发 现 错误 ， 如 拼写 错 
误 或 代码 错误 ， 我 们 将 非常 感谢 你 的 反馈 。 通 过 发 送 勘误 表 ， 可 能 
能 够 帮助 其 他 读者 ， 使 他 们 免 于 在 挫折 泪 形 中 浪费 数 小 时 ， 同 时 还 
能 帮助 我 们 提供 更 高 质量 的 信息 。 
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要 查找 本 书 的 勘误 表 ， 请 访问 www.wiley.com/go/ 
位 ontenddevelopmentasp netmvc6， 然 后 单 击 Errata 链接 。 在 这 个 页 
面 上 , 可 以 查看 所 有 已 经 提交 给 本 书 并 由 Wrox 编辑 发 布 的 勘误 表 。 

如 果 未 在 Book 勘误 页 面 上 发 现 “ 你 发 现 的 错误 ”请 访问 
www.wrox.com/contact/techsuppott.shtml， 并 填写 表格 以 向 我 们 发 送 
找到 的 错误 。 我 们 会 检查 这 些 信息 ， 在 适当 的 时 候 在 本 书 的 勘误 页 
上 发 布 信息 ， 并 在 本 书后 续 版 本 中 予以 更 正 。 
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XXII 


ASP.NET Core MVC 的 新 变化 


本 章 主要 内 容 : 
e。 .NET Web 堆栈 发 展 史 
e@ .NET Core 谜 题 的 详解 
e@ ASP.NET Core 及 其 引入 的 新 概念 介绍 
e@ ASPNET Core MVC 的 部 分 新 特性 

对 于 微软 NET Web 堆栈 而 言 ，2016 年 是 具有 里 程 碑 意 义 的 一 
年 , 因为 在 这 一 年 微软 发 布 了 .NET Core -个 用 于 构建 应 用 程序 
和 服务 的 、 完 全 开源 、 跨 平台 的 框架 。 它 包括 ASPNET Core 和 重 
制 的 MVC 框架 。 

本 章 是 对 ASPNET Core 的 简要 介绍 。 如 果 你 已 经 对 此 框架 有 
一 些 了 解 ， 可 以 通过 本 章 温 故 知 新 ， 如 果 你 对 此 框架 一 无 所 知 ， 可 
将 本 章 作 为 入 门 和 摘要 。 
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本 章 代 码 下 载 


本 章 的 相关 代码 可 通过 网 站 www.wrox.com 下 载 。 搜 索 该 书 英 
文 版 的 ISBN(978-1-119-18131-6)， 可 在 第 1 章 的 下 载 部 分 找到 对 应 
代码 。 


1.1 熟悉 软件 名 称 


在 深入 研究 新 框架 前 ， 正 确 掌握 所 有 名 词 和 版 本 号 是 很 重要 
的 ， 因 为 如 果 不 弄 清楚 ， 对 于 非 专 业 人 士 而 言 ， 这 些 名 字 就 像 一 团 
乱 腑 。 


1.1.1 ASPNET Core 

ASPNET Core 发 布 于 2016 年 。 这 个 版 本 是 对 ASPNET 的 完全 
重 写 ， 完 全 开源 、 跨 平台 ， 并 且 开 发 时 没有 向 后 兼容 的 负担 。 亮 点 
包括 : 一 个 新 的 执行 环境 、 一 个 新 的 项 目 和 依赖 关系 管理 系统 ， 以 
及 一 个 名 为 ASPNET Core MVC 的 新 Web 框架 ， 该 框架 统一 了 
ASPNET MVC 和 Web API 的 编程 模型 。 本 章 余 下 部 分 将 主要 关注 
ASPNET Core 的 各 种 特性 。 


1.1.2 .NET Core 

虽然 ASPNET Core 可 以 运行 在 标准 的 .NET 框架 (4.5 以 上 版 本 ) 
之 上 ， 但 为 了 实现 跨 平台 ， 它 需要 CLR( 公 共 语 言 运行 库 ) 也 是 跨 平 
台 的 ， 这 就 是 发 布 NET Core 的 原因 。.NET Core 是 一 个 小 型 的 、 为 
云 环境 优化 和 模块 化 的 NET 实现 ， 它 由 CoreCLR 运行 库 和 .NET 
Core 库 组 成 。 特 别 是 ， 该 运行 库 由 许多 组 件 组 成 ， 这 些 组 件 可 以 根 
据 需要 的 功能 分 别 安装 ， 可 以 独立 更 新 ， 并 且 是 二 进 制 可 部 署 的 ， 
这 样 不 同 的 应 用 程序 就 可 以 运行 在 不 同 的 (运行 库 ) 版 本 上 而 不 会 相 
互 影响 。 当 然 ， 它 可 以 在 Mac OS X 和 Linux 上 运行 。 

此 外 ，.NET Core 还 提供 了 一 个 命令 行 界面 ( 称 为 .NET CLD， 供 
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工具 和 终端 用 户 与 .NET Core SDK 进行 交互 。 


1.1.3 Visual Studio Code 

Visual Studio Code 是 微软 开发 的 跨 平 台 文本 编辑 器 ， 用 于 构建 
ASPNET Core( 以 及 许多 其 他 框架 和 语言 的 ) 应 用 程序 ， 而 不 必 应 用 
完全 版 本 的 Visual Studio。 它 也 可 在 Mac OSX 和 Linux 上 使 用 。 


1.1.4 Visual Studio 2017 

Visual Studio 2017 引入 了 一 个 基于 “工作 负载 ”(Workload) 的 全 
新 安装 流程 ， 以 更 好 地 满足 用 户 的 需求 。 其 中 的 工作 负载 之 一 
ASPNET 包含 与 最 流行 的 前 端 开 发 工具 和 框架 的 集成 。 本 书后 续 章 
节 将 进一步 介绍 。 


1.1.5 ”本 书 涵盖 的 版 本 

笔者 希望 ， 现 在 已 将 混乱 的 版 本 和 命名 介绍 得 稍微 清晰 了 
点 。 本 书 涵盖 Visual Studio 2017、ASPNET Core( 和 ASPNET Core 
MVO) 以 及 .NET Core， 但 不 包括 与 完整 版 NET 框架 相关 的 任何 内 
容 。 本 书 最 后 还 介绍 了 Visual Studio Code。 

所 有 这 些 组 件 的 相互 关系 如 图 1-1 所 示 。 


ASPNET 4.6 和 ASPNET Core 1.0 


ASPNET 4.6 ASPNET Core 1.0 


NET Framework 4.6 图 NET Core10 各 人 本 


NETE 库 .NET Core 库 


Roslyn、C#、VB、F# 语 言 、RyuJIT、SIMD 


1-1 新 的 .NET 堆栈 图 
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1.2 ”微软 .NET Web 堆栈 简 史 


在 深入 讨论 ASPNET Core 和 ASPNET Core MVC 的 新 特性 之 
前 ， 笔 者 认为 ， 回 顾 .NET Web 堆栈 的 发 展 历程 ， 以 及 为 何 最 终 产 生 
ASPNET Core 和 .NET Core 的 原因 是 很 重要 的 。 


1.2.1 ASPNET Web Forms 
2001 年 , 微软 推出 了 .NET 框架 及 其 首 个 Web 开发 框架 : ASPNET 
Web。 它 是 为 两 类 用 户 开 发 的 : 
e。 具有 传统 ASP 经 验 ,已 在 混合 使 用 HIML 和 服务 器 端 JScript 
代码 构建 动态 网 站 的 开发 者 。 他 们 也 熟悉 通过 核心 对 象 提 
供 的 抽象 (接口 ) 与 下 层 HITP 连接 和 Web 服务 器 进行 交互 
的 方法 。 

e 来 自传 统 WinForm 应 用 程序 开发 圈子 的 开发 者 。 他 们 对 
HTML 和 网 络 一 无 所 知 , 并 且 习 惯 于 通过 在 设计 界面 上 拖 动 
UI 组 件 来 构建 应 用 程序 。 
ASPNET Web Forms 旨 在 迎合 这 两 种 类 型 的 开发 者 。ASPNET 
Web Forms 提供 了 处 理 HTTP 和 Web 服务 器 对 象 的 抽象 (接口 )， 并 
使 用 ViewState 引入 了 服务 器 端 事件 的 概念 ， 隐 藏 了 Web 的 无 状态 
特性 。 最 终 得 出 一 个 非常 成 功 的 、 功 能 丰富 的 Web 框架 ， 具 有 非常 
易于 掌握 的 编程 模型 。 
但 是 ，ASPNET Web Forms 也 存在 一 些 局 限 性 : 
e@ 所 有 核心 的 Web 抽象 都 在 System.Web 库 中 提供 , 而 所 有 其 
他 Web 功能 都 依赖 于 该 库 。 

e 因为 它 基 于 设计 时 (design-time) 编 程 模型 , 所 以 ASP.NET、 .NET 
框架 和 Visual Studio 紧密 绑 定 在 一 起 。 出 于 这 个 原因 , ASP.NET 
必须 与 其 他 产品 的 发 布 周 期 一 致 ， 这 意味 着 两 个 主要 版 本 的 
发 布 时 间 会 相隔 数 年 。 


第 1 章 ASPNET Core MVC 的 新 变化 


e@ ASPNET 只 用 于 Microsoft 的 Web 服务 器 IIS 。 
e 单元 测试 几乎 是 不 可 能 的 ,只 有 使 用 改变 ASPNET Web Forms 
工作 方式 的 库 才 能 实现 。 


1.2.2 ASPNET MVC 

多 年 来 ， 这 些 局 限 性 都 并 未 导致 任何 问题 ， 但 随 着 其 他 框架 和 
语言 推动 Web 开发 的 演进 ， 微 软 开始 努力 跟 上 它们 的 更 快 节奏 。 它 
们 都 是 非常 小 巧 而 且 功 能 专 一 的 组 件 ， 根 据 需 要 进行 组 装 和 更 新 ， 
而 ASPNET 则 是 一 个 庞大 的 大 一 统 框架 ， 难 以 更 新 。 

问题 不 仅 是 发 布 周期 ， 开 发 风格 也 在 变化 。ASPNET 将 HITP 
和 HTML 标记 的 复杂 性 隐藏 和 抽象 化 ， 帮 助 很 多 WinForm 开发 者 
成 为 Web 开发 者 , 但 经 过 五 年 以 上 的 锻炼 ,现在 开发 者 希望 拥有 更 
多 控制 权 ， 尤 其 是 对 在 页 面 上 泻 染 的 标记 的 控制 权 。 

为 解决 这 两 个 问题 , 2008 年 , ASPNET 团队 开发 了 基于 模型 
(Model)- 视 图 (View)- 控 制 器 (Controllen) 设 计 模 式 的 ASPNET MVC 
框架 ， 许 多 当时 流行 的 框架 也 使 用 了 该 模式 。 该 模式 能 够 更 清晰 和 
更 好 地 将 业务 逻辑 和 表示 录 辑 分 离 ， 并 通过 去 除 服务 器 端 UI 组 件 ， 
向 开发 者 提供 对 HIML 标记 的 完全 控制 权 。 此 外 ， 不 包含 在 NET 框 
架 内 ， 而 是 采用 带 外 发 布 (out of band release) 形 式 ， 从 而 能 够 更 快 、 
更 频繁 地 发 布 新 版 本 。 

尽管 ASPNET MVC 框架 解决 了 ASPNET Web Forms 的 大 部 分 
问题 , 但 它 仍 依赖 于 IIS 和 Web 抽象 库 System.Web。 这 意味 着 它 仍 
然 不 可 能 拥有 完全 独立 于 更 大 的 .NET 框架 的 Web 框架 。 


1.2.3 ASPNET Web API 

光阴 苦 萌 , 几 年 后 , 构建 Web 应 用 程序 的 新 范例 开始 逐渐 普及 。 
它们 就 是 所 谓 的 单 页 面 应 用 程序 (SPA)。 基 本 上 , 应 用 程序 不 再 使 用 
互 连 的 、 由 服务 器 生成 的 、 数 据 驱 动 的 页 面 ， 而 主要 采用 静态 页 面 ， 
页 面 中 显示 的 数据 通过 对 Web 服务 或 Web API 的 Ajax 调用 与 服务 
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器 交互 。 此 外 ， 许 多 服务 也 开始 发 布 API， 以 让 移动 应 用 程序 或 第 
三 方 应 用 程序 与 它们 的 数据 交互 。 

为 更 好 地 适应 这 些 新 的 应 用 场景 ， 微 软 推 出 了 另 一 个 Web 框 
架 : ASPNET Web API。 借 此 机 会 ，ASPNET 团队 还 构建 了 一 个 更 
加 模块 化 的 组 件 模型 ， 该 模型 最 终 抛弃 了 System.Web， 并 创建 了 一 
个 可 独立 于 ASPNET 其 他 部 分 (以 及 更 大 的 .NET 框架 ) 单 独 运行 的 
Web 框架 。 微 软 的 软件 包 分 发 系统 NuGet 的 引入 ， 则 是 另 一 个 重要 
的 更 新 ， 该 系统 能 以 一 种 受 管理 、 可 持续 的 方式 ， 将 所 有 这 些 组 件 
交付 给 开发 者 。 将 框架 从 System.Web 中 分 离 出 来 的 另 一 个 优点 是 不 
再 依赖 于 IIS， 并 可 在 定制 的 主机 和 可 能 的 其 他 Web 服务 器 上 运行 。 


1.2.4 OWIN 和 Katana 

ASPNET MVC 和 ASPNET Web API 解 决 了 原始 ASPNET 的 所 
有 缺点 ， 但 正如 经 常 发 生 的 那样 ， 它 们 又 制造 了 新 问题 。 在 轻 量 乡 
主机 随手 可 得 和 模块 化 框架 迅速 增长 的 背景 下 ， 存 在 应 用 程序 开发 
者 需要 使 用 分 立 进程 处 理 现代 应 用 程序 所 有 方面 的 现实 风险 。 

为 在 这 个 风险 成 为 真正 问题 前 做 出 反应 , 一 群 开发 者 借鉴 Rack 
for Ruby( 也 有 部 分 来 自 于 Nodejs) 的 灵感 ， 提 出 了 一 套 规范 ， 用 于 
标准 化 从 中 央 宿 主 进程 管理 框架 和 其 他 附加 组 件 的 方式 。 该 规范 称 
为 OWIN， 即 “用 于 .NET 的 开放 Web 接口 (Open Web Interface 
for .NET)” OWIN 定义 了 组 件 (无 论 这 些 组 件 是 完整 的 框架 还 是 小 
型 过 滤器 ) 必 须 实现 的 、 宿 主 进程 用 于 实例 化 和 调用 组 件 的 接口 。 

基于 此 规范 , 2014 年 , 微软 发 布 了 符合 OWIN 的 宿主 和 服务 器 
Katana， 并 实现 了 大 量 连接 器 ， 以 便 开发 者 能 在 Katana 内 部 使 用 该 
公司 的 大 部 分 Web 框架 。 

但 仍然 存在 一 些 问题 。 首 先 ，ASPNET MVC 仍 与 System.Web 
绑 定 ， 所 以 无 法 在 Katana 中 和 运行。 此外， 因为 各 个 框架 是 在 不 同时 
间 点 开发 的 , 所 以 有 不 同 的 编程 模型 。 例 如 ，ASPNET MVC 和 Web 
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API 都 支持 依赖 注入 ,但 方式 不 同 。 这 意味 着 ,在 同一 个 应 用 程序 中 
使 用 这 两 个 框架 的 开发 者 必须 以 不 同方 式 分 别 配置 依赖 注入 两 次 。 


1.2.5 ASPNET Core 和 .NET Core 的 出 现 

ASPNET 团队 意识 到 只 有 一 种 方法 可 以 解决 所 有 剩余 的 问题 ， 
同时 能 在 Visual Studio 之 外 的 其 他 平台 之 上 进行 .NET Web 开发 。 他 
们 从 头 开始 彻底 重 写 了 ASPNET， 并 创建 了 一 个 新 的 跨 平台 .NET 
运行 库 ， 该 库 后 来 成 为 .NET Core。 


1.3 .NET Core 


现在 你 可 能 对 ASPNET Core 的 出 现 原 因 有 了 更 清楚 的 认识 ， 
该 深入 研究 .NET Core 这 一 全 新 堆栈 的 新 入 口 点 了 。.NET Core 
是 .NET 标准 库 的 一 个 路 平台 的 、 开 源 的 实现 ， 它 由 以 下 几 个 组 件 
组 成 : 
e。 .NET 运行 库 , 也 称 为 CoreCLR, 它 实现 了 基本 功能 , 如 JIT 
编译 、 基 本 .NET 类 型 、 垃 圾 收集 和 低级 类 等 。 
e CoreFX， 其 中 包含 .NET 标准 库 中 定义 的 所 有 API， 例 如 集 
合 、IO、XML、 异 步 等 。 
e 供 开发 者 构建 应 用 程序 的 工具 和 语言 编译 器 。 
e@ dotnet 应 用 程序 宿主 ， 用 于 启动 .NET Core 应 用 程序 和 开发 
工具 。 


定义 

.NET 标准 库 是 可 用 于 所 有 .NET 运行 库 的 所 有 .NET API 的 正 
式 规范 。 它 通过 定义 基 类 库 (Base Class Library，BCL) 中 的 所 有 
API( 任 何 .NET 运 行 库 都 必须 实现 这 些 APT), 从 根本 上 增强 了 CLR 
规范 (ECMA 335). 该 标准 的 目标 是 使 同一 个 应 用 程序 或 库 能 在 不 同 
的 运行 库 ( 从 标准 框架 到 Xamarin 以 及 通用 Windows 平台 ) 上 运行 。 
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1.3.1 .NET Core 入 门 

在 Windows 上 安装 .NET Core 非常 简单 ， 在 安装 Visual Studio 
2017 时 选择 .NET Core 工作 负载 即 可 安装 它 。 创 建 .NET Core 应 用 程 
序 的 过 程 也 和 使 用 Visual Studio 创建 任何 其 他 应 用 程序 基本 一 样 。 
第 8 章 介 绍 如 何在 没有 Visual Studio 时 (在 Mac 计算 机 上 ) 安 装 .NET 
Core 和 开发 应 用 程序 。 掌 握 .NET Core 应 用 程序 的 构建 原理 十 分 重 
要 ， 这 样 你 不 使 用 Visual Studio 即 可 轻松 地 完成 同样 的 工作 。 


1.3.2 ”dotnet 命令 行 

.NET Core 附带 的 最 重要 工具 是 dotnet 宿主 程序 ， 它 用 于 通过 
新 的 .NET 命令 行 界面 (CLD 启 动 包括 开发 工具 在 内 的 .NET Core 控制 
台 应 用 程序 。 此 CLI 集中 处 理 与 框架 的 所 有 交互 操作 ， 并 充当 其 他 
所 有 IDE( 如 Visual Studio) 用 来 构建 应 用 程序 的 基础 层 。 

为 了 试用 它 ， 只 需要 打开 命令 提示 符 ， 创 建 一 个 新 文件 夹 ， 
进入 该 文件 来， 然后 输入 dotnet new console。 该 命令 将 创建 一 个 
新 的 .NET Core 控制 台 应 用 程序 (参见 代码 清单 1-1) 的 框架 , 该 框架 
由 一 个 Program.cs 代码 文件 和 依据 启动 命令 时 所 在 的 文件 夹 命名 
的 .csproj 项 目 定义 文件 组 成 。 


代码 清单 1-1: 示例 Program.cs 文件 
using System7 


namespace ConsoleApplication 
{ 
public class Program 
{ 
public static void Main(string[] args) 
{ 
Console.WriteLine ("Hello World!"); 
. 


， 


new 命令 可 配合 其 他 参数 执行 ， 以 指定 要 生成 项 目的 类 型 : 
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console( 控 制 台 型 ， 上 文 刚 使 用 过 )、web、mvc、webapi、classlib、 
xunit( 用 于 单元 测试 )， 以 及 其 他 一 些 将 在 第 8 章 详细 介绍 的 类 型 。 
这 也 是 所 有 .NET CLI 命令 的 通用 结构 : dotnet 后 跟 命令 名 ， 其 后 则 

.NET Core 是 一 个 模块 化 系统 ， 与 标准 的 .NET 框架 不 同 ， 这 些 
模块 必须 按照 一 一 对 应 方式 进行 包含 。 这 些 依赖 关系 在 .csproj 项 目 
文件 中 定义 , 并 且 必 须 使 用 另 一 条 .NET Core CLI 命令 下 载 : restore。 
在 命令 提示 符 中 执行 dotnet restore， 会 下 载 应 用 程序 需要 的 所 有 依 
赖 关 系 项 。 如 果 在 开发 过 程 中 添加 或 删除 依赖 关系 项 ， 则 需要 执行 
该 操作 ， 但 在 创建 新 应 用 程序 后 并 不 严格 需要 立即 执行 ， 因 为 new 
命令 会 自动 执行 该 操作 。 

现在 一 切 都 已 准备 就 绪 ， 只 需要 输入 命令 dotnet run 即 可 执行 
该 应 用 程序 。 该 命令 将 首先 构建 应 用 程序 ， 然 后 通过 dotnet 应 用 程 
序 宿 主 调用 它 。 

实际 上 ， 该 操作 也 可 手动 完成 ， 首 先 显 式 使 用 build 命令 ， 然 后 使 
用 应 用 程序 宿主 启动 生成 的 目标 程序 (一 个 与 应 用 程序 创建 位 置 文件 夹 
同名 的 DLL): dotnet bin\Debug\netcoreapp2.0\consoleapplication.dll 
(consoleapplication 是 文件 夹 的 名 称 )。 

除了 构建 和 运行 应 用 程序 ，dotnet 命令 还 可 以 部 署 它们 并 为 共 
享 库 创 建 软件 包 。 得 益 于 可 扩展 性 模型 ， 它 还 可 实现 更 多 功能 。 第 
8 章 将 深入 介绍 这 些 主题 。 


1.4 ASP.NET Core 介绍 
现在 你 已 经 掌握 了 一 些 NET Core 工具 的 知识 ， 可 以 安全 地 转 
换 到 Visual Studio 并 探索 ASPNET Core。 


1.4.1 ASPNET Core Web 应 用 程序 项 目 概述 
与 之 前 版 本 的 框架 一 样 ， 可 使 用 命令 菜单 File | New | Project， 
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然后 从 NET Core 项 目 分 组 中 选择 ASPNET Core Web Application， 
创建 一 个 新 的 ASPNET Core 应 用 程序 。 
此 处 还 有 其 他 几 个 选项 ， 如 图 1-2 所 示 。 


New Project ? 
b Recent NET Framework 462 ~ | Sort by: Default Search (Cole 日 Pp- 
4 Installed 
Ge ac pe Vil 
4 Visual ce Es Project templates for creating ASPNET 
Windows Classic Desktop 中 Class Library (NET Core) Visual C# Core applications for Windows, Linux and 
macOS using NET Core or NET 
es cy Framework. 
区 | nit Test Project (NET Core) Visual cy 
NET Standard cs 
ne 区 ] wonit rest project (NET core) Visual Ch 
Test 
WeF 多 ASP NET Core Web Application Visual Ch 
Visual Basic 
SQL server 


b Other Project Types 


b Online 


Not finding what you are looking for? 
Open Visual studio Installer 


Name: ‘WebApplication! 
Location: YADocuments\Projects\core\chap1\Listing 1-2 - Listing 1-4\ ~ Browse. | 
Solution name: WebApplication! 加 create directory for solution 


[DD creste new Git repository 


ok || Cancel 


图 1-2 New Project 窗口 


e@ Console App: 该 选项 创建 一 个 类 似 代码 清单 1-1 的 控制 台 应 
用 程序 。 

e@ Class Library: 可 重用 于 其 他 项 目的 .NET Core 类 库 。 

e@ Unit Test Project: 运行 在 微软 MSTest 框架 上 的 测试 项 目 。 

e@ xUnit Test Project: 这 是 男 一 种 测试 项 目 , 使 用 xUnit 开源 测 
试 框架 构建 。 

然后 将 出 现 熟悉 的 模板 选择 窗口 ， 默 认 状 态 下 此 处 将 提供 如 

图 1-3 所 示 的 选项 。 
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New ASP.NET Core Web Application - WebApplication1 ? X 
[NErcore ~]|AspNET Core20 ~| Leammore 
[ | Aprojecttemplate for creating an ASP.NET Core 
a 加 列 application with example ASPINET Core MVC Views and 
本 Controllers. This template can also be used for RESTful 
Empty Web API web HTTP services. 
| Application A ee 
| 人 
| 疙 仿 
| Reactj Reactjs and 
Red 
| 全 Change Authentication 
| 
| 


Authentication No Authentication 


口 Enable Docker Support 


OSs: Windows 
Requires Docker for Windows 
Docker support can also be enabled later Learn more 


OK Cancel 


1-3 ”Web 应 用 程序 模板 


e Empty 将 创建 一 个 开始 ASP.NET Core 开发 所 需 的 最 小 项 目 。 
e Web API 模板 将 创建 一 个 ASP.NET Core 项 目 ， 其 中 包含 开 
发 一 个 REST Web 应 用 程序 所 需 的 依赖 关系 和 框架 代码 。 

e@ Web Application 创建 一 个 使 用 Razor pages 生成 的 Web 应 用 

程序 ， 这 是 一 种 更 简单 的 开发 范式 ， 本 书 不 作 介绍 。 

e@ Web Application(Model-View-Controller) 创 建 一 个 完整 项 目 ， 

其 中 包含 Web 应 用 程序 可 能 需要 的 一 切 。 

e@ Angular、Reactjs、React.js and Redux 都 是 使 用 对 应 的 框架 

创建 单 页 面 应 用 程序 的 项 目 模板 。 

除 身 份 验证 类 型 外 ， 还 可 选择 用 哪个 版 本 的 ASPNET Core 构 
建 应 用 程序 (ASPNET Core 1.0/1.1/2.0)， 以 及 是 否 启 用 对 Docker 的 
支持 (该 选项 在 第 7 章 介绍 )。 

这 里 选择 Web Application(Model-View- Controller) 模 板 , 然后 继 
续 完成 余下 操作 。 

添加 到 项 目 中 的 所 有 文件 和 文件 夹 如 图 1-4 所 示 ， 可 以 看 出 ， 
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与 传统 的 ASPNET 项 目 相 比 发 生 了 很 多 变化 。 除 了 Controllers 和 
Views 文件 夹 ， 其 余部 分 都 不 相同 。 


Solution Explorer 


各部 - 四 -气量 入 | 2 二 


Search Solution Explorer (Ctrl+)) Pp- 


网 Solution ‘WebApplication1’ (1 project) 
全 Connected Services 
4 2 Dependencies 
Db FAnalyzers 
b ‘® NuGet 
》 洲 SDk 
b 疆 Bower 
b £ Properties 


b images 
b 别 js 
Db lib 
国 faviconico 
而 | Controllers 
闻 Models 
ll Views 
© appsettingsjson 
局 bowerjson 
So bundleconfigjson 
pb cs» program.cs 
Db ce startup.cs 


vvvvv 


Solution Explorer Team Explorer Server Explorer 


1-4 新 ASPNET Core Web 应 用 程序 的 元 素 


从 最 上 方 开 始 ， 第 一 个 新 元 素 是 Connected Services( 连 接 的 服 
务 ) 节 点 ， 其 中 包含 了 连接 到 第 三 方 远 程 服务 的 扩展 程序 列表 。 

接 下 来 则 是 称 为 Dependencies( 依 赖 关 系 ) 的 节点 。 该 节点 中 包 
括 应 用 程序 具备 的 所 有 依赖 关系 ， 根 据 应 用 程序 的 需要 ， 这 些 依赖 
关系 可 能 是 .NET 软件 包 ( 通 过 NuGet 接口 )、Bower 或 NPM( 如 果 应 
用 程序 需要 的 话 )。 

目录 树 下 方 的 文件 bowerjson 中 也 会 包含 一 个 对 Bower 的 引用 ， 
该 文件 包含 所 有 依赖 关系 项 的 实际 配置 。 这 些 依赖 关系 被 下 载 后 ， 
将 存储 在 新 建 的 wwwroot 文件 夹 的 fib 文件 夹 中 。 
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一 个 元 素 是 wwwroot 文件 夹 ， 微 软 甚至 用 一 个 “地 球 ” 图 标 
来 区 别 表示 它 。 这 是 应 用 程序 的 所 有 静态 文件 、CSS 样式 表 、 图 片 
和 JavaScript 文件 的 存储 之 处 。 

项 目 根 文件 夹 下 的 文件 也 有 一 些 新 变化 : 

e@ appsettings.json 是 存储 应 用 程序 设置 的 新 位 置 , 而 不 再 存储 

于 web.config 文件 的 appsetting 元 素 中 。 

e@ bower.json 是 Bower 依赖 关系 的 配置 文件 。 

e@ bundleconfig.json 定义 对 JavaScript 和 CSS 文件 的 捆绑 和 精 

简 操作 配置 

e@ Program.cs 是 Web 应 用 程序 的 启动 点 。 如 前 所 述 , .NET Core 

应 用 程序 宿主 只 能 启动 控制 台 应 用 程序 ， 因 此 Web 项 目 也 

需要 一 个 Program.cs 实例 。 

e@ Startup.cs 是 ASP.NET Core Web 应 用 程序 的 主要 入 口 点 。 它 

用 于 配置 应 用 程序 的 行为 。 因 此 ， 之 前 的 Global.asax 文件 

已 被 去 除 。 

e@ web.config 也 被 去 除了 ， 因 为 不 再 需要 它 。 

在 新 项 目 模板 中 引入 的 许多 更 改 中 , 有 一 些 属于 .NET 方面 ， 
Startup.cs; 还 有 一 些 则 属于 更 广义 的 Web 开发 领域 ， 比 如 
Bower， 在 NPM 中 包括 依赖 关系 的 能 力 ， 精 简 、 We 
序 的 新 手段 等 。 

第 5 章 将 更 详细 地 介绍 Bower 和 NPM， 第 6 章 将 介绍 自动 构 
建 和 发 布 。 本 章 的 余下 部 分 将 从 Startup.cs 文件 开始 ， 介 绍 .NET 方 
面 的 变化 。 


1.4.2 OWIN 

为 理解 新 的 ASPNET Core 执行 模型 ， 以 及 为 何 需 要 新 的 
Startup.cs 文件 ， 必 须 学 习 OWIN， 它 是 众生 ASPNET Core 的 应 用 
程序 模型 。OWIN 定义 了 一 种 应 用 程序 组 件 之 间 彼 此 交互 的 标准 方 
式 。 该 规范 非常 简单 ， 因 为 基本 上 它 只 定义 了 两 个 元 素 : 构成 应 用 
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程序 的 各 个 层 以 及 这 些 元 素 如 何 通信 。 
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OWIN 的 层次 结构 


OWIN 的 层次 结构 如 图 1-5 所 示 ， 它 们 包括 以 下 几 项 。 


宿主 Hosb: 宿主 负责 启动 服务 器 并 管理 进程 。 在 ASPNET 
Core 中 ， 此 角色 由 dotnet 宿主 应 用 程序 或 直接 由 IIS 实现 。 
服务 器 (Server): 这 是 实际 的 Web 服务 器 ， 它 接收 HTTP 请 
求 并 发 送 回 应 ,在 ASP.NET Core 中 有 几 种 可 用 的 实现 方式 ， 
包括 IS IIS Express, 以 及 应 用 程序 在 自 托管 场景 中 的 dotnet 
宿主 内 运行 时 的 Kestrel 或 WebListener。 

中 间 件 (Middleware): 中 间 件 由 传递 性 组 件 组 成 ， 它 们 在 将 
所 有 请 求 传送 到 最 终 应 用 程序 之 前 处 理 这 些 请 求 。 这 些 组 件 
构成 了 ASP.NET Core 应 用 程序 的 执行 管道 ， 可 以 实现 任意 
功能 ， 从 简单 的 日 志 记录 到 认证 ， 再 到 一 个 类 似 ASP.NET 
MVC 的 完整 Web 框架 。 

应 用 程序 (Applicatiom): 该 层 是 最 终 应 用 程序 专属 的 代码 ， 
通常 构建 在 某 个 中 间 件 组 件 ( 如 一 个 Web 框架 ) 之 上 。 


应 用 程序 


中 间 件 


图 1-5 OWIN 的 层次 结构 
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2. OWIN 的 通信 接口 


在 OWIN 中 ， 所 有 属于 管道 组 成 部 分 的 组 件 之 间 通 过 传递 一 
个 字典 互相 通信 ， 该 字典 中 包含 有 关 请 求 和 服务 器 状态 的 所 有 信 
息 。 如 果 希 望 确保 所 有 中 间 件 组 件 都 能 相互 兼容 ， 这 些 组 件 必 须 实 现 
一 个 名 为 AppFunc( 或 应 用 程序 委托 ) 的 委托 函数 (delegate function): 


using AppFunc = Func< 
IDictionary<string, object>, // Environment 
Task>; // Done 


这 段 代 码 表达 的 基本 含义 是 ， 一 个 中 间 件 组 件 必 须 有 一 个 用 于 
接收 Environment( 环 境 ) 字 典 的 方法 ， 并 返回 一 个 包含 需要 执行 的 异 
步 操作 的 Task( 任 务 )。 


注意 

上 述 AppFunc 的 签名 是 由 OWIN 规范 定义 的 。ASPNET Core 
内 部 很 少 使 用 这 种 签名 ,因为 .NET Core API 提供 了 一 种 在 管道 中 创 
建 和 注册 中 间 件 组 件 的 更 简单 方法 。 

3. 进一步 了 解 中 间 件 


即使 在 规范 中 尚未 严格 标准 化 ,OWIN 也 建议 通过 使 用 一 个 构建 
器 函数 (builder function) 设 置 应 用 程序 并 在 管道 中 注册 中 间 件 组 件 。 注 
册 后 ， 中 间 件 组 件 会 一 个 接 一 个 地 执行 ， 直 到 最 后 一 个 产生 操作 结 
果 。 然 后 ， 中 间 件 将 以 相反 的 顺序 执行 ， 直 到 响应 被 发 回 给 用 户 。 

一 个 使 用 中 间 件 构建 的 典型 应 用 程序 可 能 如 图 1-6 所 示 。 请 求 到 
达 后 ， 首 先 由 日 志 记 录 组 件 处 理 ， 解 压缩 ， 通 过 身份 验证 ， 最 后 到 
达 执 行 应 用 程序 代码 的 Web 框架 (例如 ASPNET MVC)。 此 时 ， 执 
行 步骤 将 回 过 头 来 ， 重 新 执行 中 间 件 中 的 所 有 后 处 理 步 又 (例如 ， 重 
新 压缩 输出 或 记录 执行 请 求 所 用 的 时 间 )， 然 后 发 送 给 用 户 。 
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日 志 记 录 压缩 身份 验证 


全 于 全- 


响应 


1-6 ”中 间 件 的 执行 流程 


1.4.3 ASPNET Core 应 用 程序 剖析 

为 更 好 地 理解 ASPNET Core 及 其 使 用 NET 进行 Web 开发 的 新 
方法 ， 有 必要 创建 一 个 新 的 ASPNET Core 项 目 。 这 次 使 用 Empty 
项 目 模板 ， 以 将 注意 力 集中 于 开创 一 个 ASPNET Core 应 用 程序 所 
需 的 最 小 文件 集 。 

如 图 1-7 所 示 ，Solution Explorer 中 的 项 目 树 和 图 1-4 中 的 Web 
应 用 程序 模板 的 项 目 树 相 比 ， 简 直 空 空 如 也 。 必 需 的 要 素 只 有 源码 
文件 Program.cs 和 Startup.cs。 


Solution Explorer 
鱼 部 - -5 加 加 | £|--| 


Search Solution Explorer (Ctrl+;) Pp- 


网 solution ‘EmptyApp' (1 project) 
4 EmptyApp 
HD Connected Services 
4 Dependencies 
pb Analyzers 
b ‘@® NuGet 
》 音 sDK 
b £ Properties 
起 wwwroot 
b program 
4 C* Startup.cs 
b 如 Startup 


1-7” 空 项 目 模 板 
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1. Host Builder 控制 台 应 用 程序 


ASPNET Core 应 用 程序 基本 上 就 是 一 个 在 其 Main 方法 中 创建 
Web 服务 器 的 控制 台 应 用 程序 (参见 代码 清单 1-2)。 


代码 清单 1-2: Program.cs 


Public class Program 
{ 
public static void Main(string[] args) 
{ 
BuildWebHost (args) .Run(); 
} 


public static IWebHost BuildWebHost (string[] args) => 
WebHost .CreateDefaultBuilder (args) 
.UseStartup<Startup>() 
.Build(); 
} 
BuildWebHost 方法 用 于 通过 指定 用 于 启动 的 类 (UseStartup 
<Startup>)， 使 用 默认 的 配置 创建 Web 应 用 程序 宿主 。 
所 创建 的 Web 宿主 使 用 Kestrel 作为 服务 器 ， 在 需要 时 将 其 与 
IS 集成 ， 并 为 所 有 日 志 记 录 和 配置 源 指定 默认 配置 。 


2. ASP.NET Core 启动 类 


对 ASPNET Core 应 用 程序 的 执行 管道 配置 ， 是 通过 Startup 
类 的 Configure 方法 完成 的 。 该 方法 最 简单 的 用 法 需要 一 个 
IApplicationBuilder 类 型 的 参数 ， 用 于 接收 一 个 应 用 程序 构建 器 
(Application Builder) 的 实例 ， 该 构建 器 用 于 将 所 有 中 间 件 组 件 组 装 
在 一 起 。 

由 空 项 目 模板 创建 的 Startup 类 的 代码 如 代码 清单 1-3 所 示 。 
该 类 有 两 个 方法 ， 即 ConfigureServices 和 前 面 提 到 的 Configure。 
ConfigureServices 方法 将 在 本 章 后 面 讨论 依赖 关系 注入 时 介绍 ， 此 
处 先 重 点 关注 Configure 方法 。 
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代码 清单 1-3: Startup.cs 


public class Startup 

{ 
public void ConfigureServices (IServiceCollection services) 
{ 
} 


// This method gets called by the runtime. Use this method 
// to configure the HTTP request pipeline. 

public void Configure (IApplicationBuilder app, 
IHostingEnvironment env) 


' 


if (env.IsDevelopment ()) 
{ 
app.UseDeveloperExceptionPage(); 


} 


app.Run(async (context) => 
{ 

await context.Response.WriteAsync ("Hello World!"); 
Bz 


} 


代码 清单 1-3 中 的 重点 是 对 app.Run 方法 的 调用 。 它 指示 应 用 
程序 运行 lambda 表达 式 中 指定 的 委托 函数 。 对 于 本 段 代 码 , 该 Web 
应 用 程序 将 始终 返回 文本 字符 串 “Hello World!”。 

Run 方法 用 于 配置 terminal( 终 端 ) 中 间 件 , 该 中 间 件 不 会 将 执行 再 传 
递 给 管道 中 的 下 一 个 组 件 。 在 代码 清单 1-3 中 ， 还 使 用 app. 
UseDeveloperExceptionPage() 添 加 了 一 个 专用 的 中 间 件 组 件 。 第 三 方 
中 间 件 通常 会 提供 UseSomething 方法 ， 以 便 将 中 间 件 注册 到 管道 
中 。 添 加 定制 中 间 件 的 另 一 种 方法 是 调用 app.Use 方法 ， 指 定 负责 
处 理 请 求 的 应 用 程序 委托 函数 。 

你 可 能 已 经 注意 到 ， 在 代码 清单 1-3 中 ，Configure 方法 有 一 个 
额外 的 参数 : IHostingEnvironment。 它 提供 有 关 宿 主 环境 的 信息 ， 
包括 当前 的 EnvironmentName。 下 文 将 进一步 介绍 它们 。 
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1.5 _ ASP.NET Core 的 重要 新 特性 


除 全 新 的 启动 模式 外 , ASPNET Core 还 新 增 了 以 前 需要 第 三 方 
组 件 或 自 定义 开发 才能 实现 的 一 些 功 能 : 

e 更 方便 的 多 环境 处 理 。 

e 内 置 的 依赖 关系 注入 。 

e 一 套 内 置 的 日 志 记 录 框 架 。 

e 一 个 更 强大 、 更 易于 设置 和 使 用 的 配置 基础 架构 。 


1.5.1 环境 

ASPNET Core 中 的 一 个 基本 特性 是 访问 有 关 应 用 程序 运行 环 
境 信 息 的 结构 化 方法 ， 这 涉及 了 人 解 环境 是 开发 (development)、 演 示 
(staging) 还 是 生产 (production) 类 型 。 

此 信息 可 在 传递 给 Configure 方法 的 IHostingEnvironment 参数 
内 获取 。 只 需要 检查 其 EnvironmentName 属性 即 可 识别 当前 环境 。 
对 于 最 常用 的 环境 名 称 ， 有 一 些 扩展 方法 可 以 进一步 简化 该 过 程 : 
IsDevelopment()、IsStaging() 和 IsProduction0， 对 于 其 他 非常 规 的 环 
境 名 称 ， 可 以 使 用 Environment(envName) 方 法 。 

在 识别 环境 后 ， 即 可 添加 基于 环境 的 不 同 条 件 进 行 针 对 性 处 理 
的 功能 。 例 如 ， 可 以 仅 在 开发 环境 中 显示 详细 错误 信息 ， 而 仅 在 生 
产 环 境 中 显示 用 户 友 好 的 信息 。 

如 果 环 境 之 间 的 差异 非常 显著 , ASPNET Core 允许 为 各 个 环境 使 
用 不 同 的 启动 类 或 配置 方法 .例如 , 如果 存 在 名 为 StartupDevelopment 
的 类 ， 则 在 环境 为 Development 时 ,将 使 用 此 类 而 不 是 标准 的 Startup 
类 。 同 样 ， 将 用 ConfigureDevelopment() 方 法 替代 Configure()。 

环境 是 通过 环境 变量 ASPNETCORE ENVIRONMENT 指定 的 ， 
该 变量 可 以 通过 多 种 不 同 的 方式 设置 。 例 如 ， 可 以 通过 Windows 控 
制 面板 ， 用 批 处 理 脚本 (特别 是 在 服务 器 中 ) 或 直接 从 Visual Studio 
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件 


中 的 项 目 设置 的 Debug 部 分 (如 图 1-8 所 示 ) 设 置 该 变量 。 
通过 GUI 设置 该 信息 后 ， 会 将 其 存储 在 launchSettings.json 文 

ph， 如 代码 清单 1-4 所 示 。 
oa EmptyApp 

ET | 


Application Configuration: 国 汪 ~ atform: NA 
Build 


Build Events 


Package 


Signing Launch 1IS Express ~ 


Profile: lIS Express ~» 0 


Resources 
Application arguments: 


Working drectory- psolute path to working director [ 

回 Launch URL: 

Environment variables Name Value 
ASPNETCORE_ENVIRONMENT Development 0 


> 


Web Server Settings 
1-8 项 目 设置 


代码 清单 1-4: LaunchSettings.json 


{ 

"iisSettings": { 
"windowsAuthentication": false, 
"anonymousAuthentication": true, 
"iisExpress": { 

"applicationUrl": "http://localhost:34933/", 
"sslPort": 0 
}, 
"Profiles": { 
"IIS Express": { 
"commandName": "IISExpress", 
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"launchBrowser": true, 
"environmentVariables": { 
"ASPNETCORE ENVIRONMENT": "Development" 
} 
} 
"EmptyApp": { 


"commandName": "Project", 
"launchBrowser": true, 
"environmentVariables": { 


"ASPNETCORE ENVIRONMENT": "Development" 
] 
"applicationUrl": "http://localhost:34934" 
} 
} 
} 


1.5.2 ”依赖 关系 注入 

在 以 前 的 ASPNET 框架 中 , 是 否 使 用 外 部 依赖 关系 注入 库 由 开 
发 人 员 自 主 决定 。ASPNET Core 不 仅 内 置 了 对 依赖 关系 注入 的 支 
持 ， 而 且 实际 上 要 求 使 用 它 以 使 应 用 程序 正常 工作 。 


1. 何谓 依赖 关系 注入 ? 


依赖 关系 注入 (Dependency Injection，DD 是 一 种 用 于 构建 松散 
耦合 系统 的 模式 。 类 不 是 直接 实例 化 依赖 关系 或 访问 静态 实例 ， 而 
以 某 种 方式 从 外 部 获取 它们 需要 的 对 象 。 通 常 ， 这 些 类 通过 将 对 象 
指定 为 构造 函数 的 参数 ， 声 明 它 们 所 需 的 对 象 。 

遵循 这 种 方法 设计 的 类 遵循 依赖 关系 倒置 原则 (Dependency 
Inversion Principle)。 该 原则 指出 : 

A. 高 级 模块 不 应 该 依赖 于 低级 模块 。 两 者 都 应 该 依赖 于 抽象 。 

B. 抽象 不 应 该 依赖 于 细节 信息 。 细 节 信息 应 该 依赖 于 抽象 。 
Robert C. “Uncle Bob”Martin 

这 也 意味 着 这 些 类 不 应 该 要 求 具体 的 对 象 ， 而 应 以 接口 形式 要 
求 它们 的 抽象 。 

以 这 种 方式 构建 的 系统 的 问题 是 ， 在 某 个 临界 点 上 ， 要 创建 和 
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“注入 ”到 类 中 的 对 象 可 能 数量 多 到 难以 管理 。 为 处 理 这 个 问题 ， 需 
要 有 一 个 可 以 负责 创建 所 有 这 些 类 及 其 相关 依赖 关系 的 工厂 方法 
(factory method)。 这 样 的 类 被 称 为 容器 (container)。 容 器 的 通常 运作 
方式 是 维护 一 个 列表 ， 其 中 包含 容器 必须 为 给 定 的 某 个 接口 实例 化 
的 具体 类 。 稍 后 ， 当 要 求 容器 创建 一 个 类 的 实例 时 ， 它 们 将 基于 该 
列表 ， 检 查 该 类 的 所 有 依赖 关系 并 创建 它们 。 通 过 这 种 方式 ， 即 使 
是 非常 复杂 的 关系 图 也 可 以 通过 一 行 代码 来 创建 。 

除了 实例 化 类 之 外 , 这 些 称 为 控制 倒置 /依赖 关系 注入 (Inversion 
of Control/Dependency Injection, IoC/DD 的 容器 还 可 以 管理 依赖 关系 
的 生存 期 ， 这 意味 着 它们 知道 是 否 可 以 重用 相同 的 对 象 ， 以 及 是 否 
每 次 必须 创建 另 一 个 实例 。 


注意 

本 节 只 是 对 一 个 十 分 复杂 而 广泛 的 主题 做 了 非常 简要 的 介绍 。 有 
关 该 主题 的 书籍 很 多 , 在 互联 网 上 也 有 大 量 文章 .笔者 特别 推荐 Robert 
C. “Uncle Bob”Martin 或 Martin Fowler 的 文章 。 


2. 在 ASP.NET Core 中 使 用 依赖 关系 注入 


管 依赖 关系 注入 的 概念 相当 复杂 ,但 在 ASPNET Core 中 使 用 它 
非常 简单 。 容 器 的 配置 在 Startup 类 的 ConfigureServices 方法 内 完成 。 
实际 容器 是 以 名 为 services 的 参数 传递 给 该 方法 的 IServiceCollection 
变量 。 必 须 将 所 有 依赖 关系 添加 到 此 集合 中 。 

有 两 种 类 型 的 依赖 关系 : 框架 运作 所 需 的 依赖 关系 和 应 用 
程序 运作 所 需 的 依赖 关系 。 第 一 种 类 型 的 依赖 关系 通常 通过 类 
似 AddService 的 扩展 方法 进行 配置 。 例 如 ， 可 通过 调用 services. 
AddMvc0 以 添加 运行 ASPNET MVC 所 需 的 服务 ,也 可 以 使 用 services. 
AddDbContext<MyDbContext>(.….) 添 加 实体 框架 (Entity Framework) 所 
需 的 数据 库 上 下 文 。 第 二 种 类 型 的 依赖 关系 则 通过 指定 一 个 接口 和 
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一 个 具体 类 型 来 添加 。 每 当 容 器 接收 到 一 次 接口 请 求 时 ， 将 实例 化 
一 次 该 具体 类 型 。 
添加 服务 的 语法 取决 于 服务 需要 的 生存 期 类 型 : 
e 暂时 (Transient) 服 务 在 每 次 请 求 时 都 会 创建 ， 通 常用 于 无 状 
态 的 轻 量 级 服务 。 此 类 服务 使 用 services.AddTransient 
<IEmailSender,EmailSender>() 添 加 。 
e 作用 域 (Scoped) 服 务 会 为 每 个 Web 请 求 创建 一 次 , 通常 用 于 
保存 对 存储 库 、 数据 访问 类 或 任何 会 保留 某 种 用 于 整个 请 求 期 
的 状态 的 服务 的 引用 。 该 类 服务 使 用 services.AddScoped 
<IBlogRepository,BlogRepository>() 注 册 。 
e 单 例 (Singleton) 服 务 会 在 第 一 次 被 请 求 时 创建 一 次 ， 该 实例 
将 为 wan 单 例 服务 通常 用 于 在 应 用 程序 的 整个 
生命 期 保持 程序 的 状态 。 单 例 服务 使 用 services.AddSingleton 
<IApplicationCache, ApplicationCache>() 注 册 。 
用 于 ASPNET Core 应 用 程序 的 典型 ConfigureServices 方法 可 
能 类 似 于 以 下 代码 片段 ， 该 片段 是 在 选择 独立 的 用 户 账户 时 从 默认 
项 目 模 板 中 提取 的 : 


public void ConfigureServices(IServiceCollection services) 
{ 
// Add framework services. 
services.AddDbContext<ApplicationDbContext> (options => 
options.UseSqlServer (Configuration.GetConnectionString 
("DefaultConnection"))); 


services.AddIdentity<ApplicationUser, IdentityRole>() 
-AddEntityFrameworkStores<ApplicationDbContext>() 
.AddDefaultTokenProviders (); 


services.AddMvc (); 
// Add application services. 


services.AddTransient<IEmailSender, AuthMessageSender>(); 
services.AddTransient<ISmsSender, AuthMessageSender>(); 
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此 外 ,还 可 以 给 出 一 个 特定 实例 (这 种 情况 下 ， 容 器 将 始终 创建 
这 个 实例 )。 对 于 更 复杂 的 场景 ， 可 以 配置 一 种 工矿 方法 以 帮助 容器 
创建 特定 服务 的 实例 。 

依赖 关系 的 使 用 则 更 简便 。 在 类 、 控 制 器 或 服务 的 构造 函数 中 ， 
只 需要 添加 一 个 具有 所 需 依赖 关系 类 型 的 参数 即 可 。 稍 后 介绍 MVC 
框架 时 ， 会 列举 一 个 更 好 的 示例 。 


1.5.3 ”日 志 记录 
ASPNET Core 带 有 一 个 集成 的 日 志 记录 库 , 其 中 包含 基本 的 提 
供 程序 ， 可 将 日 志 写 入 控制 台 ， 也 可 写 入 到 调试 输出 ， 该 调试 输出 
已 通过 eye i 1-2 中 出 现 过 该 方法 ) 
配置 为 默认 Web 宿主 设置 的 一 部 分 。 
日 志 记录 器 的 实例 化 


记录 器 可 直接 使 用 依赖 关系 注入 的 方法 ， 通 过 在 控制 器 或 服务 
的 构造 函数 中 指定 类 型 为 ILogger <T> 的 参数 进行 注入 。 依 赖 关 系 注 
入 框架 将 提供 一 个 记录 器 , 其 信息 类 别 为 完整 的 数据 类 型 名 称 (例如 


Wirox.FrontendDev.MvcSample.HomeController) 。 


2. 写 入 日 志 信息 


消息 写 入 很 容易 通过 内 置 日 志 记录 库 提 供 的 扩展 方法 来 完 


_1ogger.LogInformation ("Reached bottom of pipeline for request 
{path}", context.Request.Path) 

_logger.LogWarning ("File not found") 
_logger.LogError ("Cannot connect to database") 


3. 其 他 日 志 记录 配置 


在 控制 台 和 调试 提供 程序 中 ， 已 进行 日 志 记 录 器 的 默认 配置 ， 
但 也 可 指定 其 他 提供 程序 和 配置 。 
所 有 其 他 配置 都 必须 在 Program.cs 文件 中 , 在 使 用 Configure 
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Logging 方法 设置 Web 宿主 时 指定 。 
WebHost .CreateDefaultBuilder (args) 
-UseStartup<Startup> () 
.ConfigureLogging( (hostingContext, logging)=> 
//Here goes all configuration 
}) 
.Build(); 

ASPNET Core 附带 的 内 置 日 志 记录 提供 程序 可 写 入 控制 台 、 调 
试 窗口 、Trace、Azure App 日 志 记录 和 ( 仅 受 标准 要 入 a 
事件 日 志 等 输出 目标 ， 但 如 有 必要 ， 也 可 添加 第 三 方 日 志 记 录 提 供 
程序 ， 如 NLog 或 Serilog 等 。 

例如 ， 要 添加 另 一 个 日 志 记 录 提 供 程序 (如 写 入 Windows 事件 
日 志 的 提供 程序 )， 必 须 在 ConfigureLogging 方法 内 调用 logging. 
AddEventLog()。 

必须 指定 的 另 一 个 重要 配置 是 希望 写 入 日 志文 件 的 日 志 级 别 。 
可 使 用 方法 logging.SetMinimumLevel(LogLevel.Warning) 为 整个 应 
用 程序 完成 该 配置 。 就 本 示例 语句 而 言 ， 将 只 记录 警告 、 错 误 或 严 
重 错误 。 

可 根据 记录 提供 程序 和 信息 类 别 (通常 是 日 志 消息 所 在 的 类 的 
名 称 )， 进 一 步 细 化 日 志 记 录 级 别 配 置 。 

例如 ， 假 设 希 望 将 所 有 日 志 消息 发 送 到 调试 提供 程序 ， 而 在 控 
制 台 日 志 记 录 程 序 中 , 你 关心 自己 编写 的 代码 产生 的 所 有 日 志 信息 ， 
但 对 于 源 自 ASPNET Core 库 的 信息 ， 只 关心 警告 及 以 上 级 别 的 信息 。 

此 类 配置 通过 使 用 过 滤器 (filter) 完 成 。 可 通过 配置 文件 、 代 码 
甚至 自 定义 函数 来 指定 过 滤器 。 

最 简单 的 方法 是 使 用 JSON 在 标准 配置 文件 appsettings.json 中 
指定 : 


The easiest approach is using JSON inside the standard 
appsettings.json configuration file:{ 
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"Logging": { 
"IncludeScopes": false, 
"Debug": { 

"LogLevel": { 

"Default": "Informationn 

} 

}, 
"Console": { 

"LogLevel": { 
"Microsoft.AspNet .Core": "Warning", 
"MyCode": "Information" 

} 

}, 
"LogLevel": { 

"Default": "Warning", 

} 
} 
+ 


在 编写 Web 宿主 程序 时 ， 在 ConfigureLogging 方法 中 调用 

AddFilter 方法 也 可 完成 类 似 的 操作 : 
logging.AddFilter<ConsoleLoggerProvider> ("Microsoft.AspNet", 
LogLevel .Warning); 


logging.AddFilter<DebugLoggerProvider> ("Default",LogLevel. 
Information); 


两 种 方法 可 以 一 起 使 用 ， 并 且 可 能 出 现 多 个 过 滤器 均 适 用 于 单 
条 日 志 消 息 的 情况 。 日 志 记 录 框 架 应 用 以 下 规则 来 决定 应 用 哪个 过 

(1) 首先 ， 它 选择 所 有 适用 于 该 提供 程序 的 过 滤器 和 所 有 没有 
指定 提供 程序 的 过 滤器 。 

(2) 然后 ， 比 较 过 滤器 的 信息 类 别 并 应 用 最 具体 的 类 别 ， 例 如 
Microsoft.AspNet.Core.Mvc 比 Microsoft.AspNet.Core 更 具体 。 

(3) 最 后 ， 如 果 还 剩余 多 个 过 滤器 ， 则 选用 最 后 一 个 指定 的 过 
1.5.4 配置 

如 果 你 曾 用 过 标准 ASPNET 框架 中 的 配置 设置 , 就 会 知道 除了 
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最 简单 的 那些 场景 之 外 ， 设 置 可 能 非常 复杂 。 

新 的 配置 框架 支持 不 同 的 设置 数据 源 (XML、JSON、INI、 环境 
变量 、 命 令 行 参 数 和 内 存 数 据 集 )。 它 还 能 自动 管理 不 同 的 环境 ,使 
得 创建 强 类 型 (strongly-typed) 配 置 选项 十 分 简便 。 

新 配置 系统 的 推荐 使 用 方式 是 在 构建 Web 宿主 时 对 其 进行 设 
置 ， 然 后 在 应 用 程序 中 直接 读 取 ， 或 通过 新 的 强 类 型 选项 读 取 。 


1. 设置 配置 数据 源 


因为 Configuration 类 的 最 简单 形式 只 是 键 - 值 集合 , 所 以 其 设置 
过 程 就 是 添加 用 于 从 中 读 取 所 有 这 些 键 - 值 对 的 源 。 默 认 的 Web 宿 
主 生 成 器 已 经 进行 了 设置 ， 所 以 只 需要 知道 会 从 何 处 读 取 该 配置 : 

(1) 第 一 个 配置 数据 源 是 项 目 根 目录 下 的 appsettings.json 文件 。 

(2) 接 下 来 将 从 appsettings.{env.EnvironmentrName}.json 文件 
中 读 取 配 置 。 

(3) 也 可 从 环境 变量 中 读 取 配 置 数据 。 

(4) 最 后 ， 在 使 用 dotnet run 命令 启动 应 用 程序 时 使 用 的 参数 
也 可 以 传递 配置 。 

这 一 设置 可 使 在 第 一 个 appsettings.json 文件 中 定义 的 默认 设置 
参数 ， 可 被 男 一 个 名 称 取决 于 当前 环境 的 JSON 文件 中 的 设置 参数 
覆盖 , 后 者 则 可 能 最 终 被 服务 器 上 设置 的 环境 变量 (或 传递 给 运行 应 
用 程序 的 命令 行 工具 的 参数 ) 覆 盖 。 例 如 ， 在 不 同 环境 中 ,文件 夹 的 
路 径 或 数据 库 连 接 字符 串 可 能 不 同 。 

其 他 配置 数据 源 还 有 内 存 数据 集 (in-memory collection), 它 通 常 
用 作 提 供 默 认 设置 值 的 第 一 数据 源 ; 以 及 用 户 秘密 (Users Secrets) 配 
置 数据 源 ， 它 用 于 存储 密码 或 授权 令 牌 等 不 希望 提交 给 源 代 码 存储 
库 的 敏感 信息 。 
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2. 从 配置 中 读 取 值 


读 取 数 据 集 也 很 简单 。 只 需要 使 用 其 索引 键 即 可 读 取 设 置 ， 例 
如 Configuration["usemame"]。 如 果 这 些 值 来 自 支 持 设置 树 的 源 (如 
JSON 文件 )， 则 索引 键 是 将 从 层次 结构 的 根 开始 的 所 有 属性 名 称 连 
接 在 一 起 ， 并 由 “:” 符 号 分 隔 的 字符 串 。 

例如 ， 要 读 取 在 代码 清单 1-5 所 示 的 设置 文件 中 定义 的 连接 字 
符 串 ， 应 该 使 用 以 下 索引 键 : ConnectionStrings:DefaultConnection。 
可 通过 类 似 的 方式 访问 设置 的 各 个 分 节 ， 但 不 能 使 用 简单 的 字典 键 
方法 ,而 必须 使 用 GetSection 方法 。 例如 ，Configuration. GetSection 
("Logging") 获 取 与 日 志 记 录 相 关 的 整个 子 分 节 设 置 (然后 可 将 设置 
传递 给 日 志 记 录 提 供 程序 ， 而 非 通 过 代码 配置 )。 


代码 清单 1-5: 默认 项 目 模板 的 Appsettings.json 文件 


{ 
"ConnectionStrings": { 
"DefaultConnection": 
"Server=(localdb) \\mssqllocaldb;Database=aspnet-ConfigSample- 
c18648e9-6f7a-40e6-b3f2-12a82e4e92eb;Trusted Connection= 
True;MultipleActiveResultSets=true" 
}, 
"Logging": { 
"IncludeScopes": false, 
"LogLevel": { 
"Default": "Warning" 
} 
} 
} 


遗憾 的 是 ， 这 种 简单 方法 只 有 在 能 够 直接 访问 配置 类 (例如 
Startup 类 ) 的 实例 时 才 有 效 。 有 两 种 可 选 方法 可 与 其 他 组 件 共享 配置 。 
一 种 方法 是 创建 一 个 自 定义 服务 以 集中 配置 访问 操作 ， 就 像 标准 的 
ASPNET 框架 的 做 法 一 样 。 第 二 种 是 新 方法 ， 也 是 推荐 使 用 的 方法 ， 
该 方法 更 容易 配置 ， 也 不 需要 编写 定制 代码 。 这 种 方法 使 用 Options。 


R= 
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3. 使 用 强 类 型 配置 


创建 强 类 型 配置 选项 所 需要 做 的 工作 ， 并 不 比 创建 实际 用 于 保 
存 设置 的 那些 类 多 太 多 。 
例如 ， 假 设 希 望 访问 以 下 配置 设置 : 


"MySimpleConfiguration": "option from json file", 
"MyComplexConfiguration": { 

"Username": "simonech", 

"Age": 42, 

"IsMvp": true 
} 


只 需要 创建 两 个 逐一 映射 JSON 文件 中 的 属性 的 类 ， 如 代码 清 
单 1-6 所 示 。 


代码 清单 1-6: 选项 类 (Configuration\MyOptions.cs) 


public class MyOptions 
{ 
public string MySimpleConfiguration { get; set; } 


public MySubOptions MyComplexConfiguration { get; set;} 
} 


public class MySubOptions 

{ 
public string Username { get; set; } 
public int Age { get; set; } 
public bool IsMvp { get; set; } 


} 


现在 要 做 的 只 剩 下 在 配置 和 类 之 间 创 建 绑 定 。 这 是 通过 
ConfigureServices 方法 完成 的 ， 如 下 面 的 代码 片段 所 示 : 


public void ConfigureServices (IServiceCollection services) 


{ 
services.AddOoptions (); 


Services.Configure<MyOptions> (Configuration); 


} 
AddOptions 方法 仅 增 加 了 对 将 选项 注入 控制 器 或 服务 的 操作 
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的 支持 ， 而 Configure <TOption> 扩 展 方 法 则 扫描 Configuration 集合 
并 将 其 中 的 键 映 射 到 Options 类 中 的 属性 值 。 如 果 集 合 包含 未 映射 
的 键 ， 将 直接 忽略 它们 。 

如 果 某 个 选项 类 仅 关 心 某 个 子 部 分 的 值 ， 例 如 MyComplex 
Configuration, 则 可 以 在 调用 Configure<TOption> 扩 展 方法 时 指定 要 
用 作 配 置 根 的 分 节 ， 与 配置 日 志 记录 时 的 操作 类 似 : 


services.Configure<MySubOptions>(Configuration.GetSection 
("MyComplexConfiguration")) 


现在 即 可 通过 调用 注入 目标 的 构造 函数 ， 将 选项 注入 任何 请 求 
它们 的 控制 器 或 服务 中 。 
代码 清单 1-7 中 展示 了 一 个 通过 向 构造 函数 中 添加 IOptions 
<MySubOptions> 类 型 的 参数 来 访问 选项 类 MySubOptions 的 控制 器 。 
注意 ， 该 参数 不 是 实际 的 选项 类 ， 而 是 它 的 一 个 访问 器 (Accessor)， 所 
以 在 使 用 它 时 需要 使 用 Value 属性 。 
代码 清单 1-7: 带 选 项 的 HomeController 


public class HomeController : Controller 
{ 


private readonly MySubOptions _options; 


public HomeController (IOptions<MySubOptions> optionsAccessor) 
{ 
_optionsAccessor = optionsAccessor.Value; 


$ 
public IActionResult Index() 
{ 

var model = _options; 


return View (model); 


} 


IOptions 的 替代 方案 


使 用 IOptions 是 ASPNET Core 团队 推荐 的 方法 ， 因 为 它 为 其 
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他 应 用 场景 例如 在 配置 发 生 更 改 时 自动 重新 加 载 一 提供 了 前 
提 ， 但 有 些 人 认为 这 种 方法 过 于 复杂 

幸运 的 是 , 还 有 其 他 一 些 蔡 代 方案 , 其 中 之 一 就 是 通过 直接 在 IoC 
容器 中 注册 配置 ， 将 其 直接 传送 给 控制 器 。 除 了 ConfigureServices 
方法 和 Controller 之 外 ， 该 方案 的 大 部 分 代码 与 使 用 IOptions 的 代 
码 类 似 。 

也 可 以 直接 将 Configuration 对 象 绑 定 到 强 类 型 的 类 ， 然 后 将 其 
注册 到 IoC 容器 中 ， 而 不 是 通过 调用 AddOptions 方法 启用 Options 
框架 : 


var config = new MySubOptions(); 
Configuration.GetSection ("MyComplexConfiguration") .Bind 
(config); 

services.AddSingleton (config); 


通过 这 种 方式 ， 控 制 器 可 直接 使 用 配置 ， 而 不 必 经 过 IOptions 
接口 转手 。 


1.6 部 分 ASP.NET Core 中 间 件 简介 


现在 ， 我 们 编写 的 这 个 应 用 程序 还 没有 什么 功能 ， 只 能 显示 一 
串 文 本 。 但 是 ， 只 需要 添加 一 些 中 间 件 即 可 添加 更 多 功能 ， 这 些 中 
间 件 已 作为 ASPNET Core 的 一 部 分 发 布 。 


人 6 a 

你 可 能 希望 添加 的 第 一 个 附加 组 件 可 在 Microsoft.AspNetCore. 
he 软件 包 中 找到 。 不 必 手 动 添加 该 包 ， 因 为 在 ASPNET 
Core 2.0 中 ， 所 有 包 都 已 作为 Microsoft.AspNetCore.All 元 数据 包 的 
一 部 分 纳入 。 

它 包 含 一 些 用 于 协助 处 理 错误 的 不 同 组 件 。 首 先是 开发 者 异常 
页 面 ， 可 使 用 UseDeveloperExceptionPage 添加 到 管道 中 ， 这 是 “ 死 
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亡 黄页 (Yellow Page of Deathb) ”的 一 个 更 强大 替代 品 ， 因 为 它 还 能 显 
示 一 些 有 关 请 求 状态 、cookie 和 HTTP 头 的 信息 (如 图 1-9 所 示 )。 


西 - 口 x 


[Dintermal Server Error 


所 > © Dlocalhost5000/throw 六 上 三 


An unhandled exception occurred while processing the request. 


Exception: Exception triggered! 
<Configure>b_1.4 in startup.cs, line 51 


ae cue esee 


Exception: Exception triggered! 


<Configure>b_1.4in startup.cs 

45， Requestpath = new Pathstring("/Archive") 

46, D; 

47， 

48. app.MapWhen(context => context.Request.Path == "/missing”, [rap D; 
49. app-Mapkhen(conte, extRequest.Path == */throw", builde 

Se, builder.Run( (context) => { 

Sl. 

52, Ds; 

53, 

54. D; 

55, app .Maphen (context => context.Request.Path == "/Error”, builder => { 
56, builder.Run(asyne (context) => { 

57 ait context-Response. WriteAsync("Error Happenedl"); 
MoveNext 

ThrowForNons， 


图 1-9 开发 者 异常 页 面 
此 页 面 在 开发 过 程 中 非常 有 用 ， 但 这 些 详细 信息 绝 不 应 暴露 给 
公众 。 有 异常 处 理 程序 中 间 件 可 用 于 在 发 生 错误 时 通过 指定 应 用 程序 
必须 重 定向 的 路 径 将 用 户 转 向 其 他 页 面 


app.UseExceptionHandler ("/Error") 


如 果 页 面 不 存在 ， 通 常 应 用 程序 应 该 返回 HTTP 404 状态 码 和 
“页 面 未 找到 ”的 警告 信息 ， 但 除非 沈 行 并 定 ， ASPNET Core 并 不 
会 这 样 做 。 境 运 的 是 ， 完 成 指定 操作 很 简单 ， 只 需要 使 用 
app.UseStatusCodePages0 将 其 添加 到 管道 中 。 

1.6.2 ”提供 静态 文件 服务 
通过 使 用 Microsoft.AspNetCore.StaticFiles 包 的 功能 , 并 使 用 


app.UseStaticFiles() 注 册 该 中 间 件 ,ASPNET Core 应 用 程序 可 以 提供 
HIML、CSS、JavaScript 和 图 像 等 静态 文件 服务 。 
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该 中 间 件 组 件 将 提供 wwwroot 文件 夹 下 的 所 有 文件 , 就 像 它们 
位 于 应 用 程序 的 根 路 径 中 一 样 。 因 此 ， 当 接收 到 对 http://example. 
com/index.html 的 一 个 请 求 时 , 将 返回 /wwwroot/index.html 文件 。 为 
提供 wwwroot 以 外 的 文件 夹 服务 ， 也 可 定义 其 他 路 径 。 以 下 代码 创 
建 StaticFile 中 间 件 的 另 一 个 实例 , 以 在 接收 到 对 路 径 http://example. 
com/archive 的 请 求 时 ， 为 MyArchive 下 所 有 文件 提供 服务 。 


app.UseStaticFiles (new StaticFileOptions() 


FileProvider = new PhysicalFileProvider!( 
Path.Combine (Directory.GetCurrentDirectory(), @"MyArchive")), 
RequestPath = new PathString("/RArchive") 
}); 


如 果 希 望 自动 提供 index.html 文件 而 不 必 指 定 其 名 称 ， 则 必须 
在 所 有 UseStaticFiles 之 前 添加 另 一 个 中 间 件 组 件 UseDefaultFiles。 

该 软件 包 中 的 其 他 组 件 还 有 可 浏览 文件 和 文件 夹 的 UseDirectory 
Browser; 以 及 UseFileServer, 它 包 含 上 述 另 三 个 组 件 的 所 有 功能 (但 
出 于 安全 原因 ， 默 认 情 况 下 目录 浏览 是 禁用 的 )。 

警告 

在 此 强调 一 些 安 全 性 注意 事项 。UseStaticFiles 中 间 件 不 会 对 授 
权 规 则 进行 任何 检查 , 因此 存储 在 wwwroot 下 的 所 有 文件 都 可 公开 
访问 。 另 外 ， 局 用 目录 浏览 是 一 种 安全 风险 ， 不 应 在 生产 网 站 中 应 
用 。 如 果 需 要 目录 浏览 功能 或 保护 静态 资产 ， 最 好 将 文件 存储 在 无 
法 从 Web 访问 的 文件 夹 中 ， 并 使 用 ASPNET Core MVC， 通 过 控制 
器 的 动作 返回 结果 。 


1.6.3 ”应 用 程序 框架 

最 重要 的 中 间 件 组 件 是 完全 接管 执行 并 托管 应 用 程序 代码 的 
组 件 。 对 于 ASPNET Core， 有 两 个 应 用 程序 框架 可 用 

e MVC 框架 ， 用 于 开发 呈现 HIML 和 处 理 用 户 交 互 的 Web 
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应 用 程序 。 
e Web API 框架 ， 用 于 构建 RESTful Web 服务 ， 此 类 服务 可 供 
单 页 应 用 程序 或 移动 / 物 联网 设备 上 的 本 机 应 用 程序 使 用 。 
这 两 个 框架 共享 许多 概念 , 并 且 与 以 前 的 ASPNET 版 本 不 同 的 
是 ， 在 ASPNET Core 中 ， 二 者 的 编程 模型 已 经 统一 ， 因 此 几乎 没 
有 区 别 。 


1.7 ASP.NET Core MVC 


几乎 所 有 的 MVC 更 新 版 框架 的 新 特性 ， 都 与 从 标准 ASPNET 
框架 向 ASPNET Core 的 转变 有 关 。 前 文 已 经 涵盖 了 新 的 启动 进程 、 
基于 OWIN 的 新 执行 管道 、 新 的 宿主 程序 模型 ， 以 及 内 置 的 配置 、 
日 志 记 录 和 依赖 关系 注入 库 。 

本 章 最 后 一 节 介绍 MVC 框架 特有 的 新 功能 ， 首 先 介 绍 在 
ASPNET Core 应 用 程序 中 设置 该 框架 的 新 方式 , 以 及 如 何 定义 路 由 
表 ， 然 后 介绍 如 何在 控制 器 中 使 用 依赖 关系 注入 ， 最 后 讲述 与 视图 
相关 的 有 趣 新 功能 : 视图 组 件 和 标签 助手 。 

1.7.1 在 ASPNET Core 中 使 用 MVC 框架 

在 ASPNET Core 中 , 启动 一 个 MVC 项 目的 最 简单 方法 是 使 用 
Web Application 模板 创建 一 个 新 项 目 。 这 样 做 将 设置 好 一 切 ， 以 便 
用 户 可 以 立即 开始 编写 应 用 程序 的 代码 。 大 部 分 准备 工作 都 在 
Startup 类 中 完成 (参见 代码 清单 1-8)。 


代码 清单 1-8: Web Application 模板 的 Startup 类 


Public class Startup 
{ 
public Startup (IConfigurationRoot configuration) 
{ 
Configuration = configuration; 


} 
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public IConfigurationRoot Configuration { get; } 


// This method gets called by the runtime. Use this method 
// to add services to the container. 
public void ConfigureServices (IServiceCollection services) 
{ 

// Add framework services. 

services.AddMvc (); 


} 


// This method gets called by the runtime. Use this method 
// to configure the HTTP request pipeline. 
public void Configure (IApplicationBuilder app, IHostingEnvironment 
env) 
{ 
if (env.IsDevelopment ()) 
{ 
app.UseDeveloperExceptionPage(); 
app.UseBrowserLink(); 
} 
else 
| 
app.UseExceptionHandler ("/Home/Error"); 


} 
app.UseStaticFiles(); 


app.UseMvc (routes => 
{ 
routes .MapRoute ( 
name: "default" 
template: "{controller=Home}/{action=Index}/{id?}"); 


除了 前 儿 节 中 已 经 描述 的 内 容 ( 诊 断 、 错误 处 理 和 提供 静态 文件 
服务 ) 之 外 ， 默 认 模 板 还 将 Mve 中 间 件 添加 到 管道 中 ， 并 将 Mve 服 
务 添加 到 内 置 的 IoC 容器 中 。 

在 添加 Mvc 中 间 件 时 ， 还 将 配置 路 由 。 在 本 例 中 ， 指 定 了 默 
认 路 由 。 它 将 URL 的 第 一 个 字段 与 控制 器 名 相 匹 配 ， 将 第 二 个 字 
段 与 动作 名 相 匹 配 ， 将 第 三 个 字段 与 action 方法 的 名 为 id 的 参数 
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相 匹 配 。 如 果 没 有 指定 ， 请 求 将 由 名 为 Index 的 操作 和 名 为 Home 的 
控制 器 处 理 。 

这 与 以 前 的 ASPNET MVC 框架 没有 区 别 ， 只 是 定义 路 由 表 的 
一 种 不 同方 式 。 定 义 不 在 global.asax 文件 中 进行 ， 而 是 在 中 间 件 的 
配置 中 完成 。 


1.7.2 在 控制 器 中 使 用 依赖 关系 注入 

本 章 前 文中 已 介绍 过 依赖 关系 注入 ， 以 及 如 何 将 自 定 义 服务 添 
加 到 内 置 容器 中 。 下 面 将 介绍 如 何在 控制 器 和 操作 方法 中 使 用 这 些 
服务 。 

使 用 抽象 的 诸多 原因 之 一 是 这 样 便于 测试 应 用 程序 的 行为 。 例 
如 ， 如 果 某 个 网 上 商店 必须 在 春季 的 第 一 天 显示 一 条 特殊 消息 ， 可 
能 不 会 想 等 到 3 月 21 日 才 确 保 应 用 程序 正常 工作 。 因 此 对 于 这 种 情 
况 , 更 明智 的 做 法 是 不 要 直接 依赖 System.DateTime.Today 属性 ,而 
是 将 该 属性 包装 在 外 部 服务 中 ,以 将 其 替换 为 一 个 始终 返回 3 月 21 
日 的 假 实 现 ， 以 便 进行 测试 。 

该 做 法 是 通过 定义 接口 (对 于 本 例 而 言 接口 非常 简单 )， 并 通过 
在 一 个 具体 类 中 实现 该 接口 完成 的 ， 如 代码 清单 1-9 所 示 。 

代码 清单 1-9: IDateService 接口 及 其 实现 


public interface IDateService 
{ 

DateTime Today { get; } 
} 


public class DateService: IDateService 
{ 
public DateTime Today 
上 
get { 
return DateTime.Today; 
} 
} 
} 


第 1 章 ASPNET Core MVC 的 新 变化 


public class TestDateService : 
{ 

public DateTime Today 

{ 


IDateService 


get 
{ 
return new DateTime (2017, 3, 21); 


} 
} 
在 接口 和 具体 类 就 绪 后 ， 必 须 修改 控制 器 以 允许 向 其 构造 函数 
进行 注入 。 实 现 方 法 如 代码 清单 1-10 所 示 。 


代码 清单 1-10: 带 有 构造 函数 注入 的 HomeController 


public class HomeController : Controller 
{ 
Private readonly IDateService _dateservice; 


public HomeController (IDateService dateService) 
! 


_dateservice = dateservice; 


public IActionResult Index() 
{ 


var today = _dateService.Today; 
if(today.Month==3 && today.Day==21) 


ViewData["Message"] = "Spring has started, enjoy our 
spring sales!"; 
return View(); 


} 


将 服务 和 控制 器 连接 在 一 起 所 需 的 最 后 一 步 ， 是 将 服务 注册 到 
内 置 的 IoC 容器 中 。 如 前 所 述 , 这 是 在 ConfigureServices 方法 内 部 ， 
通过 使 用 services.AddTransient <IDateService, dateService>0 完 成 的 。 

在 操作 方法 中 使 用 服务 的 另 一 种 方式 是 通过 新 的 [FromServices] 
绑 定 属性 。 该 方式 对 于 仅 在 一 个 特定 方法 中 (而 非 整 个 控制 器 中 ) 用 
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到 服务 的 情况 特别 有 用 。 可 以 用 这 个 新 属性 重 写 代 码 清单 1-10， 如 
代码 清单 1-11 所 示 。 


代码 清单 1-11: 带 有 操作 方法 参数 注入 的 HomeController 


public class HomeController : Controller 
{ 
public IActionResult Index([FromServices] IdateService 
dateservice) 
{ 
Var today = dateService.Today; 
if(today.Month==3 && today.Day==21) 
ViewData["Message"] = "Spring has started, enjoy our 
spring sales!"; 
return View(); 
} 
} 


1.7.3 ”视图 组 件 

上 面 介 绍 了 控制 器 的 设置 过 程 和 一 些 新 特性 ， 接 下 来 将 从 视图 
组 件 开始 ， 介 绍 视 图 方面 的 新 功能 。 它 们 与 分 部 视图 (Partial View) 
类 似 ， 但 功能 更 强大 ， 可 用 于 不 同 的 场景 。 

顾名思义 ， 分 部 视图 用 于 将 复杂 的 视图 分 割 成 许多 较 小 且 可 重 
用 的 部 分 。 它 们 在 视图 的 上 下 文中 执行 ， 因 此 可 以 访问 视图 模型 ， 
并 且 由 于 只 是 一 些 razor 文件 ， 它 们 无 法 拥有 复杂 的 逻辑 。 

另 一 方面 ， 视 图 组 件 不 能 访问 视图 模型 ， 只 能 访问 传递 给 它 的 
参数 。 它 们 是 同时 封装 了 后 端 逻辑 和 razor 视图 的 可 重用 组 件 。 因 
此 ， 它 们 由 两 部 分 组 成 : 视图 组 件 类 和 razor 视图 。 它 们 的 应 用 场 
景 与 已 被 从 ASPNET Core 的 MVC 框架 中 删除 的 Child Actions( 子 操 
作 ) 相 同 ， 它 们 在 页 面 中 可 重复 使 用 ， 并 需要 一 些 可 能 涉及 查询 数据 
库 或 Web 服务 的 逻辑 操作 的 部 分 ， 如 侧 边 栏 、 菜 单 等 。 

组 件 类 继承 自 ViewComponent 类 ， 并 且 必 须 实现 方法 Invoke 
或 InvokeAsync( 返 回 IviewComponentResulb。 按 照 惯例 ， 视 图 组 件 
类 位 于 项 目 根 目录 的 ViewComponents 文件 夹 中 ， 其 名 称 必须 以 


第 1 章 ASPNET Core MVC 的 新 变化 


ViewComponent 结尾 。 代 码 清单 1-12 展示 了 一 个 名 为 SideBarView 
Component 的 视图 组 件 类 ， 该 类 用 于 显示 需要 在 网 站 的 所 有 页 面 中 
显示 的 链接 列表 。 


代码 清单 1-12: ViewComponents\SideBarViewComponent.cs 文件 


namespace MvcSample.ViewComponents 
{ 
public class SideBarViewComponent : ViewComponent 
{ 
private readonly ILinkRepository db; 
public SideBarViewComponent (ILinkRepository repository) 
{ 
db = repository; 


} 


public IViewComponentResult Invoke (int max = 10) 
{ 

Var items = db.GetLinks() .Take (max); 

return View(items); 


} 


如 例子 中 所 示 ， 像 控制 器 一 样 ， 视 图 组 件 类 可 使 用 依赖 注入 框 
架 ( 在 本 例 中 ， 它 使 用 了 一 个 存储 库 类 ， 该 类 返回 一 个 链接 的 列表 )。 

由 视图 组 件 呈 现 的 视图 和 任何 其 他 视图 一 样 ， 接 收 在 View 方 
法 中 指定 的 视图 模型 ， 该 模型 可 通过 @Model 变量 访问 。 唯 一 要 记 
住 的 细节 是 视图 的 名 字 。 按 照 惯例 ， 视 图 名 必须 是 Views\Shared\ 
Components\< 组 件 名 >\Default.cshtml( 因 此 对 于 本 例 而 言 应 该 是 
Views\Shared\Components\SideBar\Default.cshtml)， 如 代码 清单 1-13 
所 示 。 


代码 清单 1-13: Views\Shared\Components\SideBar\Default.cshtml 


@model IEnumerable<MvcSample.Model .Link> 


<h2>Blog Roll</h2> 
ul> 
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eforeach (var link in Model) 
<li><a href-"elink.Url">e@link.Title</a></1i> 
Se 
最 后 ， 为 将 视图 组 件 包含 到 视图 中 ， 必 须 调用 @Component. 
InvokeAsync 方法 ， 提 供 一 个 匿名 类 ， 其 中 带 有 视图 组 件 的 Invoke 
方法 的 参数 。 


Qawait Component .InvokeRsync ("SideBar"，new { max = 5}) 


如 果 你 使 用 过 之 前 版 本 中 的 子 操作 ， 将 立即 注意 到 视图 组 件 和 
它 的 主要 区 别 。 这 些 参数 直接 由 调用 方法 提供 ， 并 且 不 通过 模型 绑 
定 在 路 由 中 外 推 。 这 是 因为 视图 组 件 不 是 操作 方法 ， 而 是 一 个 不 重 
用 标准 MVC 执行 管道 的 全 新 元 素 。 另 一 个 好 处 是 ， 不 会 像 在 使 用 
子 操作 时 还 了 指定 [Childonly] 属 性 一 样 ， 导 致 将 这 些 组 件 错误 地 暴 
露 给 网 络 。 


1.7.4 标签 帮助 程序 

标签 帮助 程序 (Tag Helper) 是 ASPNET Core MVC 中 引入 的 一 个 
新 概念 。 它 们 是 标准 HIML 标签 和 Razor HTML 帮助 程序 的 混合 体 ， 
兼 具 二 者 之 精华 。 标 签 帮助 程序 的 形式 与 标准 的 HIML 标签 类 似 ， 
因此 不 必 再 在 编写 HTML 和 C# 代 码 之 间 切 换 。 它 们 也 有 一 些 HIML 
帮助 程序 的 服务 器 端 逻辑 ， 例 如 ， 它 们 可 以 读 取 视 图 模型 的 值 并 有 
条 件 地 添加 CSS 类 。 

1. 在 ASP.NET Core 中 使 用 标签 帮助 程序 

下 面 以 如 何 为 表单 编写 一 个 输入 文本 框 为 例 进行 说 明 。 对 于 
HTML 帮助 程序 ， 需 要 写 出 @Html.TextBoxFor(m => m.Email)， 而 使 
用 标记 助手 时 ,代码 则 是 <input asp-for="Email"/>。 前 者 是 一 段 返 回 
HTML 的 C# 代 码 , 后 者 则 是 增强 了 一 些 特殊 属性 (在 本 例 中 是 asp-for) 
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的 HIML 。 

当 HIML 标签 需要 附加 属性 时 (例如 ， 你 想 添 加 特定 的 类 或 某 
些 data-* 或 aria-* 属 性 )， 其 优势 将 突出 。 使 用 HTML 帮助 程序 时 ， 
需要 提供 一 个 包含 所 有 附加 属性 的 匿名 对 象 , 而 使 用 标签 帮助 程序 ， 
只 需要 编写 标准 静态 HIML， 并 直接 添加 特殊 属性 。 

通过 比较 需要 一 个 额外 类 和 需要 禁用 自动 完成 的 文本 框 的 两 
种 不 同 语法 , 可 以 更 明显 地 看 出 二 者 的 差异 。 使 用 HTML 帮助 程序 
时 ， 代 码 如 下 : 


QHtml .TextBoxFor (m=>m.Email, new { @class = "form-control", 
autocomplete="off" }) 


同样 的 文本 框 ， 使 用 标签 帮助 程序 的 代码 如 下 : 


<input asp-for="Email" class="form-control" autocomplete= 
bh da > 


使 用 标签 帮助 程序 的 另 一 个 附加 价值 是 Visual Studio 对 其 的 文 
持 。 标 签 帮助 程序 获得 IntelliSense( 智 能 提示 ) 功 能 并 具有 不 同 的 语 
法 高 亮 显示 功能 。 

图 1-10 一 图 1-12 显示 了 开始 在 Visual Studio 中 输入 一 个 可 能 是 
标签 帮助 程序 的 标签 时 会 发 生 的 情况 。 在 IntelliSense 列表 中 ， 可 识 
别 哪些 标签 可 能 是 标签 帮助 程序 , 它们 用 新 图 标 ( 带 有 二 尖 括号 的 @ 
符号 ) 标 识 。 选 择 了 标签 后 ，IntelliSense 将 显示 所 有 可 能 的 属性 ， 同 
样 使 用 新 图 标 标识 标签 帮助 程序 .最 后, 当 输 入 属性 时 , Visual Studio 
会 将 其 识别 为 一 个 标签 帮助 程序 ， 它 将 用 不 同 颜色 标记 该 标签 ， 并 
为 asp-for 属性 的 值 提供 IntelliSense。 

ASPNET Core MVC 附带 了 许多 标签 帮助 程序 ， 除 了 用 于 呈现 
表单 ， 还 可 用 于 其 他 任务 ， 比 如 某 个 Image 标签 帮助 程序 ， 可 以 向 
URL 添加 版 本 号 以 确保 它 不 被 缓存 ， 以 及 一 个 Environment 标签 帮 
助 程序 ， 可 以 依据 所 属 的 环境 ， 有 条 件 地 呈现 不 同 的 HIML 片段 。 
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Emodel MvcSample.Model. Link 


| 
时 The input element represents a typed data field, usually with a form control to alow the user to edit the data. 
© ins 


link 


《> main 


如 Microsoft AspNetCore Mvc TagHelpers.FormActionTagHelper 


Microsoft AspNetCore.Razor TagHelpers [TagHelper implementation targeting <button> elements and <input> 
elements with their type attribute set to image or submit 


如 Microsoft.AspNetCore.Mvc TagHelpers.InputTagHelper 


Microsoft AspNetCore Raror TagHelpers [TagHelrer implementation targeting <input> elements with an asp-for 
attribute. 


图 1-10 识别 可 能 是 标签 帮助 程序 的 标签 


@model MvcSample.Model.Link 


<input 引 
@ accept 
@ accesskey 
Oalt 


@ autocomplete 


加 autofocus 
@ capture 
加 dass 下 


图 1-11 标签 的 属性 


@model MvcSample.Model.Link 


<input asp-for=" 


wm huwnbP 


®@ Equals 

外 GetHashCode 
@ GetType 
Id 


Pd string MvcSample.Model.Link.Title { get set } 


®@ ToString 


Fu 


1-12 属性 的 快速 输入 
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2. 编写 自 定义 标签 帮助 程序 


除 可 用 的 内 置 程序 外 ， 也 可 很 容易 地 编写 自 定义 标签 帮助 程 
序 。 当 需要 输出 一 段 长 而 重复 ， 在 一 个 实例 与 另 一 个 实例 间 区 别 很 
小 的 HIML 代码 时 ， 它 们 非常 有 用 。 

为 说 明 如 何 编写 自 定义 标签 帮助 程序 ， 下 面 编 写 一 个 通过 指定 
电子 邮件 地 址 ， 自 动 创建 电子 邮件 链接 的 标签 帮助 程序 。 该 程序 将 
把 <email>info@wrox.com</email> 转 换 为 <a href="mailto:info@wrox 
.com"> Info@Owrox.com </a>。 

标签 帮助 程序 是 一 个 名 为 <Helper>TagHelper 的 类 , 它 从 TagHelper 
类 派生 ， 并 实现 了 Process 或 ProcessAsync 方法 。 

这 两 个 方法 有 以 下 两 个 参数 : 

e@ context 参数 包含 当前 执行 上 下 文 的 信息 。 

e@ output 参数 包含 一 个 原始 HTML 的 模型 且 必 须 由 标签 帮助 

程序 修改 。 

该 标签 帮助 程序 的 全 部 代码 如 代码 清单 1-14 所 示 。 

代码 清单 1-14: EmailTagHelper.cs 
public class EmailTagHelper: TagHelper 
| public override async Task ProcessAsync (TagHelperContext 
context, TagHelperOutput output) 
output .TagName = "a"; 
var content = await output.GetChildContentAsync(); 


output . Attributes .SetRAttribute ("href", "mailto:"+content. 
GetContent () ); 


} 

下 面 分 析 该 代码 的 功能 。 

第 一 行使 用 HTML 代码 中 所 需 的 字符 串 ( 在 本 例 中 是 emaiD) 替 
代 标 签 的 名 称 (output.Tagname)， 由 于 目的 是 生成 一 个 链接 ， 它 必须 
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是 一 个 <a> 标 签 。 

第 二 行 获取 元 素 的 内 容 。 这 是 通过 使 用 GetChildContentAsync 
方法 完成 的 ， 该 方法 还 负责 执行 任何 存在 的 Razor 表达 式 。 

最 后 ， 将 上 一 步 中 获取 的 字符 串 赋 给 href 属性 。 

在 使 用 新 创建 的 标签 帮助 程序 之 前 ， 必 须 指 示 框 架 在 何 处 寻找 
标签 帮助 程序 。 这 是 在 _ViewImports.cshtml 文件 中 完成 的 ， 请 参见 
代码 清单 1-15。 

代码 清单 1-15: _Viewlmports.cshtml 


@using MvcSample 
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers 
Q@addTagHelper "*, MvcSample" 


第 一 行 由 默认 项 目 添 加 ， 是 使 用 内 置 标签 帮助 程序 所 需要 的 ， 
而 第 二 行 则 指示 框架 在 项 目的 所 有 类 中 寻找 新 的 标签 帮助 程序 。 
最 终 ， 通 过 输入 以 下 内 容 ， 即 可 使 用 标签 帮助 程序 ， 


<email>info@wrox.com</email> 


除 此 示例 外 , 第 4 章 还 给 出 一 个 呈现 Bootstrap 组 件 的 标签 帮助 
程序 的 代码 。 


3. 将 视图 组 件 作 为 标签 帮助 程序 


上 文 已 经 介绍 过 如 何 使 用 InvokeAsync 方 法 在 razor 视 图 中 添加 
视图 组 件 。 但 从 ASPNET Core 1.1 开始 ， 也 可 以 通过 附加 前 绥 ve， 
使 用 与 标签 帮助 程序 (和 IntelliSense) 相 同 的 语法 来 包含 视图 组 件 。 

采用 该 语法 ,代码 清单 1-12 和 1-13 中 的 视图 组 件 也 可 以 使 用 
<Vc:side-bar m></vc:side-bar> 实 例 化 并 同样 获得 IntelliSense 支持 ， 
如 图 1-13 所 示 。 
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<div class="col-md-3"> 


<Vvc:Side-bar m></vc:side-bar> 


</div> @ 
图 1-13 视图 组 件 上 的 IntelliSense 


1.7.5 Web API 

与 以 前 版 本 的 Web API 不 同 ， 在 ASPNET Core 中 ，Web API 
应 用 程序 可 重用 所 有 与 MVC 相同 的 特性 和 配置 。 

例如 , 要 编写 一 个 APL 返回 代码 清单 1-12 中 使 用 的 链接 列表 ， 
只 需要 创建 一 个 遵循 Web API 路 由 约定 ， 并 指定 每 个 操作 响应 的 
HTTP 动词 的 控制 器 ， 如 代码 清单 1-16 所 示 。 


代码 清单 1-16: LinksController cs 


[Route ("api/[controller]")] 
public class LinksController : Controller 
{ 
private readonly ILinkRepository db; 
public LinksController (ILinkRepository repository) 


db = repository; 
HttpGet] 
public IEnumerable<Link> Get() 
return qdb .GetLinks (); 
HttpGet ("{id}")] 
public Link Get(int id) 


return db.GetLinks() .SingleOrDefault (1=>1.Id==id) ; 


$ 


该 控制 器 将 响应 向 URL 地 址 /api/Links 发 出 的 HITP GET 请 求 ， 
以 JSON 格式 返回 所 有 链接 的 列表 , 而 对 向 URL 地 址 /api/Links/4 
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发 出 的 GET 请求， 将 返回 id 为 4 的 链接 。 此 行为 由 Route 属性 以 
及 HttpGet 方法 规定 ， 前 者 配置 API 方法 的 名 称 ， 后 者 则 指定 在 使 
用 GET 调用 API 时 ， 执 行 哪个 操作 。 


1.8 本 章 小 结 


ASPNET Core 引入 了 一 个 新 的 、 更 现代 化 的 框架 , 得 益 于 内 置 
依赖 关系 注入 的 支持 和 易于 使 用 的 组 件 模型 ， 该 框架 有 助 于 编写 高 
质量 的 代码 。 除 了 更 优秀 的 框架 , 整个 开发 体验 也 发 生 了 彻底 改变 。 
新 的 基于 命令 行 的 开发 者 工具 使 得 使 用 更 轻 量 的 IDE 进行 开发 成 为 
可 能 ; 类似 Bower、NPM 和 gulp 的 典型 前 端 开发 领域 元 素 的 引入 ， 
使 得 新 的 .NET 堆栈 对 来 自 不 同 背景 的 开发 者 更 具 吸 引力 。 

但 这 些 变化 也 带 来 了 新 挑战 。 .NET 开发 者 必须 自我 优化 , 开始 
学 习 新 技术 并 熟练 掌握 其 他 语言 。 本 书 的 余下 部 分 将 详细 介绍 成 为 
一 名 熟练 .NET Web 开发 者 需要 的 所 有 新 技术 和 语言 。 
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前 端 开 发 者 工具 集 


本 章 主要 内 容 : 
e 前 端 开发 使 用 的 工具 类 型 
e 各 工具 类 型 中 的 主要 工具 


上 一 章 简要 介绍 最 新 服务 器 端 框架 (ASPNET Core 和 ASPNET 
Core MVC) 之 后 ， 本 章 将 介绍 前 端 开发 的 基础 知识 ， 向 你 展示 何 时 
需要 采用 一 些 附 加 工具 ， 以 提升 开发 工作 的 效率 。 

本 章 涵盖 以 下 类 型 的 工具 : 

e JavaScript 框架 : 这 些 框架 有 助 于 构建 复杂 的 Web 界面 ， 
它们 把 典型 服务 器 端 系统 开发 的 最 佳 实践 引入 前 端 开 发 中 ， 
例如 模型 -视图 -控制 器 (MVC) 模 式 、 模 型 -视图 -视图 模型 
(model-view-view model,，MVVM)、 依 赖 关系 注入 (dependency 
injection，DD、 路 由 以 及 许多 其 他 技术 。 

e CSS 框架 : 开发 者 通常 不 擅长 制作 美观 且 保 持 风格 一 致 的 
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Web 应 用 程序 界面 ,CSS 框架 提供 了 一 套 样 式 和 UI 组件 集 ， 
利用 这 些 样式 和 组 件 ， 可 以 开发 出 外 观 接近 专业 设计 水 准 的 
Web 应 用 程序 。CSS 框架 还 有 助 于 解决 自 适应 设计 (responsive 
design) 问 题 ， 自 适应 设计 可 以 适应 多 种 分 辨 率 和 屏幕 尺寸 ， 
还 可 以 应 用 复杂 的 动画 和 页 面 变换 效果 。 

e 包 管 理 器 : 系统 正 日 趋 变 为 一 个 不 同 组 件 的 混合 和 组 合体 ， 
其 中 许多 组 件 依赖 于 其 他 组 件 。 如 果 没 有 包 管 理 器 ， 那 么 管 
理 所 有 依赖 关系 并 保持 版 本 正确 将 是 一 场 疆 梦 。 

e 构建 (build) 系 统 : 如 果 你 的 知识 背景 是 纯 .NET 的 ， 可 能 
经 使 用 过 一 些 构建 系统 ， 例 如 NAnt 或 MSBuild。 前 端 开 发 
业界 推出 了 自己 的 构建 系统 , 专 为 处 理 前 端 系统 的 构建 工作 
而 设计 。 

@ 语言 ， 这 部 分 超出 了 C# 和 VB.NET 的 范畴 ， 前 述 分 类 中 涉 
及 的 工具 中 的 大 多 数 都 是 用 JavaScript 或 其 他 领域 专用 语言 
(DSD) 构 建 的 ， 且 必须 与 这 些 语 言 共 同 使 用 。 

本 章 提供 一 份 对 上 述 每 个 分 类 中 最 流行 工具 的 概览 ， 首 先 介绍 

其 中 最 基础 的 内 容 ， 也 就 是 你 需要 了 解 的 其 他 几 种 语言 。 


本 章 代码 下 载 
本 章 的 相关 代码 可 通过 网 站 www.wrox.com 下 载 。 搜 索 该 书 的 
ISBN(978-1-119-18131-6)， 可 在 第 2 章 的 下 载 部 分 找到 对 应 代码 。 


2.1 需要 了 解 的 其 他 几 种 语言 


以 “前 端 开 发 者 ”方式 开发 Web 应 用 程序 所 需要 的 语言 不 仅 有 
C#、 标 准 客户 端 JavaScript 和 CSS。 本 书 中 描述 的 许多 工具 依赖 于 
另 一 个 版 本 的 JavaScript(Node.JS) 和 其 他 领域 特有 的 语言 (如 
Sass/Less 和 JSON)。 
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2.1.1 Node.js 
Nodejs 实际 上 不 是 一 种 语言 , 而 更 接近 于 一 种 用 于 快速 构建 可 
扩展 的 网 络 应 用 程序 的 平台 。 它 构建 在 Chrome V8 JavaScript 运行 
库 ( 与 Google Chrome 浏览 器 内 所 使 用 的 JavaScript 引擎 相同 ) 之 上 。 
Nodejs 是 一 种 基于 事件 的 异步 框架 , 具有 非 阻 塞 输入 /输出 
(VO), 基本 上 这 意味 着 当 应 用 程序 等 待 IO 操作 (从 数据 流 读 取 或 写 
入 数据 ， 其 中 数据 流 可 以 是 磁盘 上 的 文件 、HTTP 连接 、 标 准 输出 
或 任何 其 他 以 “ 流 ” 方 式 传 输 数据 的 对 象 ) 或 等 待 任何 其 他 事件 发 生 
时 ， 不 会 消耗 CPU 周期 。 
如 果 你 从 未 接触 过 Nodejs 代码 ， 代 码 清单 2-1 是 Node.js 的 标 
准 Hello 示例 。 该 代码 加 载 http 模块 ， 通 过 指定 响应 到 达 时 应 该 执 
行 的 函数 来 创建 server 对 象 , 并 开始 监听 端口 8080 上 的 HITP 连接 。 
代码 清单 2-1: Node.js 的 Hello 示例 


var http = require('http'); 


Var server = http.createServer (function (req, res) { 
res.writeHead(200, {'Content-Type': 'text/plain'}); 
res.end('Hello ASP.NET Core developers!\n'); 

By 


server.listen(8080); 


console.log('Server running at http://127.0.0.1:8080/'); 


但 IO 不 只 与 HITP 有 关 。IO 还 涉及 从 磁盘 或 内 存 流 中 读 取 和 
写 入 文件 ， 因 此 Node.js 也 常用 于 开发 命令 行 工具 和 实用 程序 。 笔 
者 在 本 书 这 样 一 本 ASPNET Web 开发 书籍 中 提 到 这 一 点 的 原因 , 是 
因为 “前 端 开 发 业界 ”中 最 流行 的 构建 工具 大 多 数 是 利用 Nodejs 
开发 的 。 

采用 Nodejs 的 另 一 个 原因 是 因为 该 框架 拥有 一 个 非常 有 用 的 
工具 ， 即 节点 包 管 理 器 (Node Package Manager，NPM)， 稍 后 将 介绍 
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该 工具 ， 第 5 章 中 更 详细 地 介绍 它 。 


2.1.2 JSON 
严格 来 说 ，JSON(JavaScript Object Notation，JavaScript 对 象 表 
示 ) 不 是 一 种 语言 ， 而 是 一 种 数据 交换 格式 ， 它 易于 由 计算 机 解析 和 
生成 ， 同 时 易于 人 类 读 写 。 顾 名 思 义 ， 本 质 上 它 是 对 JavaScript 对 
象 序列 化 。 如 代码 清单 2-2 所 示 ， 它 是 一 个 对 象 ， 其 属性 是 一 系列 
键 - 值 对 ， 其 中 的 键 必 须 是 一 个 字符 串 ， 而 值 既 可 以 是 字符 串 /数值 / 
布尔 类 型 的 值 . 另 一 个 对 象 (包含 在 大 括号 内 ), 也 可 以 是 值 的 数组 (位 
于 方 括号 内 的 )。 
代码 清单 2-2，JSON 数据 
{ 
"name":"Simone Chiaretta", 
"age": 42, 
"address": { 
"oity":"Brussels"y 
"country":"Belgium" 
pplesth [ 
"triathlion™s 
"web development", 
"jigsaw puzzles" 
loved true 
} 
利用 JavaScript 的 eval 函数 解析 JSON 文本 ， 将 把 文件 中 序列 
化 的 数据 结构 直接 存 入 内 存 中 。 但 是 ， 并 不 推荐 这 样 做 ， 由 于 eval 
函数 将 执行 所 有 内 容 , 所 以 可 能 存在 安全 隐患 。JavaScript 中 有 一 个 
原生 解析 函数 JSON.parse(jsonText)， 它 将 验证 文本 ,清除 掉 恶 意 的 
和 可 能 威胁 安全 的 代码 ， 只 返回 “消毒 ”后 的 数据 结构 。 
其 逆 操 作 ( 将 JavaScript 对 象 写 入 JSON 文 本 ) 也 由 JSON .stringify 
(myObject) 函 数 原生 支持 。 
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由 于 JavaScript 中 具备 用 于 解析 和 写 入 JSON 字符 串 的 原生 支 
持 ， 该 格式 还 用 于 在 单 页 应 用 程序 的 客户 端 和 服务 器 之 间 ， 通 过 
Ajax 调用 进行 数据 交互 。 

由 于 便于 读 取 ，JSON 也 逐渐 开始 用 作 配 置 文件 的 格式 。 在 
ASPNET Core 项 目 中 ， 配 置 文件 的 首选 格式 是 JSON。 此 外 ， 所 有 
包 管 理 器 的 配置 文件 也 都 采用 JSON 格式 。 


2.1.3 Sass 和 Less 

如 果 你 用 过 CSS， 可 能 已 经 注意 到 ， 它 看 起 来 像 是 一 种 易于 处 
理 的 语法 ,但 实际 上 ,， 如 果 未 经 精心 组 织 ， 它 将 成 为 一 个 维护 璐 梦 。 
如 果 想 改变 某 个 组 件 的 颜色 ， 可 能 需要 在 多 个 不 同 的 类 定义 中 进行 
修改 。 此 外 ， 为 指定 框 的 大 小 ， 通 常 具 有 执行 一 些 计算 ， 才 能 获得 
填充 、 边 距 和 边框 的 正确 尺寸 。 

为 克服 这 些 问题 ,五 年 前 ，Ruby 社区 开发 了 两 种 元 语言 ， 然 后 
将 它们 编译 成 标准 的 CSS: Sass( 它 是 指 Syntactically Awesome 
Stylesheets) 和 Less。 通 过 采用 这 种 方法 ， 可 引入 诸如 变量 、 函 数 、 
混入 (mixin) 和 嵌 套 等 概念 ， 并 且 仍 然 得 到 标准 的 CSS 文件 。Sass 和 
Less 起 初 都 是 Ruby 语言 的 工具 ， 但 后 来 人 们 为 它们 开发 了 其 他 语 
言 的 编译 器 ， 所 以 现在 它们 可 以 集成 在 包括 Visual Studio 在 内 的 任 
何 开发 工作 流 和 IDE 中 。 

现在 ， 将 介绍 在 这 两 种 语言 中 如 何 实现 一 些 基本 特性 ， 以 及 它 
们 如 何 变 换 为 CSS。 

首先 ， 考 虑 每 种 语言 的 基本 原则 

在 Sass 中 ， 变 量 由 前 级 $ 标 识 : 


$ dark-blue:#3bbfce; 
#header { 

color: $dark-blue; 
} 
hz 滞 

color: $dark-blue; 
} 
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Less 变量 则 使 用 @ 作 为 前 绥 : 


@dark-blue:3bbfce, 
#header { 

color: @dark-blue; 
} 
h2 { 

color: @dark-blue; 
} 


它们 都 被 编译 为 如 下 CSS: 


#header { 

color: #3bbfce; 
} 
he 

color: #3bbfce; 
} 


男 一 个 基本 特性 是 混入 ,它们 基本 上 是 一 些 CSS 属性 , 这 些 属 
性 可 被 包含 在 许多 类 的 定义 中 。 它 们 也 可 以 接受 参数 。 

在 Sass 中 ， 包 含 概念 在 语法 上 是 十 分 明显 的 。 混 入 由 关键 字 
@mixin 定义 ， 并 与 关键 字 @include 一 起 使 用 : 


@mixin menu-border (S$width: lpx) { 
border-top: dotted S$width black; 
border-bottom: solid S$width*2 black; 

} 


#menu { 
Qinclude menu-border 


. 


#side-menu { 
@include menu-border (2px) 


} 


另 一 方面 ，Less 不 引入 任何 新 语法 , 只 是 改变 了 CSS 的 标准 类 
语法 的 用 法 ， 主 要 是 使 得 类 可 作为 其 他 类 的 一 部 分 : 
-menu-border (@ width: lpx){ 


border-top: dotted @width black; 
border-bottom: solid @width*2 black; 
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小 


} 


#menu { 
-menu-border 


上 


#side-menu { 
.menu-border (2px) 


} 
两 种 语法 都 编译 为 以 下 代码 行 : 


#menu { 
border-top: dotted lpx black; 
border-bottom: solid 2px black; 
} 


#side-menu { 
border-top: dotted 2px black; 
border-bottom: solid 4px black; 


Sass 在 语法 上 更 显 式 , 而 Less 尽 可 能 重用 标准 CSS, 但 它们 的 
最 终 形式 非常 相似 ， 因 此 选择 使 用 哪 一 种 取决 于 开发 者 。 

笔者 鼓励 你 在 这 两 种 语言 的 相应 网 站 上 阅读 它们 的 其 他 特性 ， 
并 试用 它们 以 确定 更 喜欢 哪 一 种 。 但 是 选择 很 可 能 最 终 取 决 于 希望 
使 用 哪 一 类 CSS 框架 。 在 本 章 介 绍 的 四 种 框架 中 ， 两 种 使 用 了 Sass 
(Primer CSS 和 Material Design Lite)， 另 外 两 种 使 用 了 Less(Bootstrap 
CSS 和 Semantic UT)。 


2.1.4 JavaScript 的 未 来 

JavaScript 基于 演进 中 的 ECMAScript 标准 ， 该 标准 在 2015 年 
发 展 到 第 6 版 ， 通 常 被 称 为 ES6。 这 个 版 本 加 入 了 一 些 有 意义 的 新 
特性 ， 例 如 类 ( 带 有 构造 函数 、getter、setter 和 继承 )、 模 块 、 模 块 加 
载 器 “箭头 ”语法 (C# 的 lambda 表达 式 ), 以 及 一 些 标准 数据 结构 (如 
Map、Set 等 )。 

尽管 主要 浏览 器 在 它们 的 最 新 版 本 中 实现 了 ES6 特性 , 但 旧版 
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本 不 支持 这 些 特性 ， 因 此 或 许 需 要 过 一 段 时 间 之 后 才能 将 ES6 用 于 
Web 开发 。 但 正如 Sass 和 Less 克服 了 CSS 的 一 些 局 限 性 一 样 ， 有 
些 元 语言 实现 了 部 分 新 规范 。 其 中 之 一 是 TypeScript。 


2.1.5 TypeScript 

在 等 待 各 种 JavaScript 引擎 赶 超 ES6 特性 的 同时 ， 微 软 发 布 了 
TypeScript。 它 引入 了 对 ES6 所 提出 的 类 、 模 块 和 箭头 语法 的 支持 ， 
以 及 一 些 JavaScript 中 当前 不 可 用 的 其 他 概念 ， 如 强 类 型 、 接 口 、 
泛 型 等 。 

但 它 并 非 一 个 微软 版 JavaScript。 类 似 于 Sass 和 Less 被 编译 成 
标准 CSS，TypeScript 也 被 编译 成 标准 JavaScript。 它 还 执行 静态 分 
析 ， 并 报告 可 能 存在 的 误 用 和 类 型 错误 。 

如 前 所 述 ，TypeScript 的 特性 之 一 是 强 类 型 。 实 际 上 ， 强 类 型 
只 是 在 编译 时 检查 的 类 型 注解 : 

function add (x: number, y: number): number { 


return xt+y; 


} 


var sum = add(2,3); 
Var wrongSun = add("hello","world"); 


上 述 代 码 中 对 函数 add 的 第 一 次 调用 是 正确 的 。 它 编译 正确 ， 
并 在 执行 时 返回 正确 值 。 

另 一 方面 ， 第 二 次 调用 是 错误 的 。 虽然 它 执行 正确 ， 但 编译 通 
不 过 , 因为 静态 分 析 认 为 hello 不 是 一 个 数值 , 不 是 函数 add 的 预期 
参数 类 型 。 

代码 清单 2-3 展示 了 如 何在 TypeScript 中 定义 一 个 具有 构造 函 
数 、public 类 型 方法 、private 类 型 字段 和 访问 器 的 类 。 

代码 清单 2-3: 一 个 TypeScript 类 


class Greeter { 
public greeting: string; 
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private name: String7 


constructor (message: string) { 
this.greeting = message; 


} 


greet() { 
return this.greeting + ", " + this. namet+"!"; 


} 


get name (): string { 
return this. name; 


} 


set name (newName: string) { 
this. name = newName; 
} 
} 


let greeter = new Greeter("Hello"); 
greeter.name="World"; 


alert (greeter.greet ()); //Says "Hello, World!" 


在 此 只 展示 了 TypeScript 的 少数 特性 ， 但 笔者 希望 你 能 更 深入 
地 了 解 它 ,因为 它 是 Angular 中 编写 JavaScript 应 用 程序 的 方法 , 通 
过 使 用 TypeScript，Angular 大 大 提升 了 生产 效率 。 


2.2 ” JavaScript 框架 


和 开发 服务 器 端 应 用 程序 时 绝 不 会 通过 手动 处 理 HTTP 请 求 和 
响应 道理 相同 的 是 ， 也 不 应 该 通过 在 简单 的 JavaScript 类 中 直接 操 
作 DOM 并 管理 应 用 程序 的 状态 , 来 构建 客户 端 交 互 。 对 于 该 目的 ， 
应 该 使 用 JavaScript 应 用 程序 框架 ， 如 Angular、React 等 。 

如 果 你 已 经 在 本 行业 工作 多 年 ， 可 能 已 经 注意 到 JavaScript 框 
架 的 兴衰 速度 有 多 快 ， 而 其 中 一 些 比 其 他 的 还 要 快 。 接 下 来 几 节 将 
简要 介绍 目前 流行 的 一 些 框架 (考虑 到 它们 的 企业 支持 , 以 及 已 经 有 
了 较 长 时 间 的 历史 ， 它 们 可 能 仍然 能 坚持 一 段 时 间 )。 
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2.2.1 Angular 

Angular 框架 目前 由 Google 和 一 个 由 个 人 与 企业 开发 者 组 成 的 
社区 共同 维护 。Angular 是 一 个 客户 端 框架 ， 基 于 使 用 称 为 “Web 
组 件 ” 的 新 元 素 扩 展 HTML 的 思路 开发 ， 这 些 Web 组 件 添加 了 额 
外 行为 。Web 组 件 既 可 以 是 HIML 属性 ,也 可 以 是 元 素 。 它 们 具有 
相关 模板 ， 该 模板 通过 使 用 写 在 双重 花 括号 ({{ }}) 内 的 表达 式 来 呈 
现 组 件 的 数据 。 代 码 清单 2-4 展示 了 一 个 使 用 了 双向 绑 定 的 简单 
Angular 应 用 程序 的 主要 组 件 。 注 意 ， 该 应 用 程序 被 分 为 多 个 文件 。 


代码 清单 2-4: 一 个 简单 的 Angular 应 用 程序 


index.html: 主 HTML 文件 


<!doctype html> 

<html> 

<head> 
<meta charset="utf-8"> 
<title>Hello Angular</title> 
<base href="/"> 

</head> 

<body> 
<app-root>Loading...</app-root> 

</body> 

</html> 


main.ts: 应 用 程序 启动 文件 

import './polyfills.ts'; 

import { platformBrowserDynamic } from '@angular/platform- 
browser-dynamic'; 

import { enableProdMode } from '‘'@angular/core'; 

import { AppModule } from './app/app.module'; 
platformBrowserDynamic() .bootstrapModule (AppModule); 


app.module.ts: App 模块 定义 文件 


import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '‘'@angular/core'; 
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import { FormsModule } from 'Qangular/forms'7 
import { HttpModule } from '@angular/http'; 


import { AppComponent } from './app.component'; 


@NgModule ({ 
declarations: [ 
AppComponent 
]， 
imports: [ 
BrowserModule, 
FormsModule, 
HttpModule 
]， 
providers: [], 
bootstrap: [AppComponent] 
i, 
export class AppModule { } 


app.component.ts: App 组 件 应 用 程序 文件 
import { Component } from '@angular/core'; 


@Component ({ 
selector: 'app-root', 
templateUrl: './app.component.html', 
styleUrls: ['./app.component.css'] 


} 
export class AppComponent { 


public firstName: string = "Simone"; 
public lastName: string = "Chiaretta"; 


fullName() { 
return ‘${this.firstName} ${this.lastName}; 
} 


app.component.html: App 组 件 模板 文件 


<form> 
<div> 
<label for="firstName">First name:</label> 
<input name="firstName" [ (ngModel)]="firstName"> 
</div> 
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<div> 
<label for="lastName">Last name:</label> 
<input name="lastName" [ (ngModel)]="lastName"> 
</div> 
</form> 


<hr/> 
<hl>Hello <span>{{ fullName() }}</span>!</h1> 


整个 程序 都 始 于 app-root 元 素 ， 该 元 素 定 义 了 根 组 件 ，main.ts 
文件 中 定义 的 应 用 程序 引导 指令 从 该 根 组 件 开 始 执 行 。 然 后 可 以 看 
到 app 组 件 划 分 为 三 个 文件 : 
e app-module.ts， 除 了 辅助 代码 之 外 ， 定 义 了 该 应 用 程序 的 所 
有 组 件 。 
e app.component.ts, 定义 了 实际 组 件 ( 包 含 哪 种 html 元 素 、 哪 
个 模板 、 哪 种 样式 ) 及 其 行为 。 
e app.component.html, 是 包含 了 组 件 所 呈现 的 HTML 标记 的 
模板 。 
另 一 条 重要 指令 是 [ngModeD)]， 它 将 表单 元 素 绑 定 到 组 件 模型 
正如 你 可 能 已 经 注意 到 的 那样 ， 该 Angular 应 用 程序 的 
JavaScript 代码 是 用 TypeScript 编写 的 。 
Angular 远 不 只 有 这 些 基本 特性 。 它 具备 依赖 关系 注入 、 模 板 
化 、 路 由 、 模 块 、 测 试 等 功能 ， 还 可 以 定义 自 定义 指令 。 下 一 章 将 
详细 介绍 所 有 这 些 特性 。 


2.2.2 Knockout 

Knockout 是 在 微软 开发 者 圈子 中 特别 流行 的 一 种 JavaScript 框 
架 。 该 框架 最 初 由 微软 开发 者 Steve Sanderson 开发 ， 实 现 了 “模型 
-视图 -视图 模型 模式 。 在 某 种 程度 上 , 它 的 语法 与 Angular 非常 相似 ， 
但 特性 较 少 ， 并 且 需 要 更 多 的 工作 量 以 定义 属性 是 否 支 持 双 向 数据 
绑 定 。 它 也 支持 模板 ， 以 便 在 整个 应 用 程序 中 重用 相同 的 代码 片段 。 
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代码 清单 2-5 展示 了 利用 Knockout 编写 的 与 上 一 节 中 相同 的 
Hello 表单 。 


代码 清单 2-5: 利用 Knockout 编写 的 简单 应 用 程序 


<!doctype html> 
<html> 
<head> 
<title>Hello Knockout!</title> 
<script src="knockout-min.js"></script> 
</head> 
<body> 
<div> 
<p>First name: <input data-bind="value: firstName" /></p> 
<p>Last name: <input data-bind="value: lastName" /></p> 
<hr> 
<hl>Hello <span data-bind="text: fullName"></span>!</h1> 
</div> 
</body> 


<script> 

function ViewModel() { 
this.firstName = ko.observable ("Simone"); 
this.lastName = ko.observable ("Chiaretta") 7 


this.fullName = ko.computed(function() { 
return this.firstName() + " " + this.lastName(); 
}, this); 
} 


ko.applyBindings (new ViewModel]l ()); 
</script> 


</html> 


这 个 简单 应 用 程序 中 的 主要 组 件 位 于 ViewModel 函数 中 , 该 函 
数 利用 ko.observable 函数 和 ko.computed 函数 定义 了 视图 模型 的 属 
性 。 第 一 个 函数 告知 框架 : 给 定 的 属性 必须 被 “观察 ”， 且 双向 绑 定 
机 制 应 该 考虑 它 。 第 二 个 函数 定义 了 一 个 属性 ， 该 属性 依赖 于 其 他 
属性 ， 且 只 要 后 者 发 生 更 改 ， 就 将 被 更 新 。 

随后 这 些 属 性 通过 data-bind 属性 与 UI 绑 定 : 
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e@ 表单 的 元 素 使 用 了 value 绑 定 。 它 将 元 素 的 值 与 视图 模型 中 

e 当 希 望 显示 表达 式 属 性 的 文本 值 时 ， 使 用 text 绑 定 。 

HTML 模板 和 视图 模型 之 间 的 “ 粘 合 ”语句 是 示例 中 的 最 后 一 
行 代码 : ko.applyBindings(new ViewModel0):。 

Knockout 的 学 习 曲 线 没有 Angular 陡峭 ， 但 功能 有 限 ， 且 开发 
近期 已 经 放 缓 。 出 于 这 个 原因 ， 本 书 不 再 详细 介绍 它 。 不 过 ， 如 果 
需要 开发 一 个 比较 简单 、 不 需要 Angular 强大 功能 (和 复杂 性 ) 的 应 用 
程序 ， 笔 者 建议 查看 官方 网 站 并 阅读 教程 。 


2.2.3 React 

另 一 个 值得 一 提 的 JavaScript 框架 是 React。React 由 Facebook 
公司 开发 和 维护 ， 是 一 个 专用 于 构建 用 户 界面 ， 而 不 以 负责 应 用 程 
序 的 其 他 功能 为 目标 的 JavaScript 库 。React 基于 以 下 概念 : 由 独立 
组 件 泻 染 所 需 的 HIML、 并 可 选择 性 地 管理 组 件 自身 内 部 状态 。 一 
个 简单 的 React 应 用 程序 如 代码 清单 2-6 所 示 。 注 意 代码 被 分 成 多 
个 文件 。 


代码 清单 2-6: 用 React 开发 的 简单 Hello 应 用 程序 


Index.html: 主 HTML 文件 


<!dqoctype html> 
<html lang="en"> 
<head> 
<title>Hello React!</title> 
</head> 
<body> 
<div id="greet"></div> 
</body> 
</html> 


index.js: 应 用 程序 启动 文件 


import React from "Teact'7 
import ReactDOM from ‘react-dom'; 


第 2 章 前端 开发 者 工具 集 


import Greeter from './Greeter'; 


ReactDOM. render ( 
<Greeter firstName="Simone" />， 
document .getElementById('greet') 


greeterjs: 组 件 文件 
import React, { Component } from "react'7 


class Greeter extends React.Component { 
constructor (Props) { 
super (props); 
this.state = {firstName: props.firstName, lastName: props. 
lastName}; 


this.handleFirstNameChange = this. 
handleFirstNameChange.bind(this); 
this.handleLastNameChange = this. 
handleLastNameChange .bind (this); 


handleFirstNameChange (event) { 
this.setState({firstName: event.target .value}); 


handleLastNameChange (event) { 
this.setState({lastName: event.target .value}); 


render() { 
return ( 
<div> 
<form> 
<div> 
<label> 
First name: 
<input type="text" value={this.state.firstName} 
onChange={this.handleFirstNameChange} /> 
</label> 
</div> 
<div> 
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<label> 
Last name: 
<input type="text" value={this.state.lastName} 
onChange={this.handleLastNameChange} /> 
</label> 
</div> 
</form> 
<hr/> 
<hl>Hello <span>{this.state.firstName} {this.state. 
lastName}</span>!</h1> 
</div> 
); 
} 
} 


export default Greeter; 


从 代码 清单 2-6 的 示例 可 以 看 出 , 该 代码 比 Knockout 代码 更 复 
杂 ， 但 与 Angular 代码 更 类 似 。 即 使 对 于 例子 中 这 样 的 小 型 表单 ， 
也 需要 将 代码 转换 为 组 件 。 借 助 称 为 JSX 的 、 用 于 简化 HIML 元 素 
输出 的 “奇怪 混合 ”JavaScript/XML( 用 于 render 方法 ) 语 法 的 帮助 ， 
React 仍然 执行 直接 DOM 操作 (实际 上 是 虚拟 DOM)。 

React 使 用 这 种 语法 ， 是 因为 它 设计 用 于 处 理 Facebook 的 动态 
内 容 加 载 ， 其 中 数据 输入 只 是 交互 的 一 小 部 分 ， 数 百 个 元 素 被 动态 
添加 到 页 面 中 。 为 最 快 地 完成 该 操作 ， 需 要 不 通过 模板 解析 和 双向 
绑 定 步骤 ， 直 接 操纵 DOM。 如 果 没 有 这 样 的 应 用 场景 ， 而 只 是 一 
个 标准 的 数据 绑 定 REST 应 用 程序 ， 可 能 更 适合 使 用 Angular。 


注意 

在 代码 清单 2-6 中 ， 可 在 两 个 JavaScript 文件 的 开头 看 到 一 种 
“奇怪 ”的 语法 : import * from *。 这 是 一 种 用 于 定义 和 导入 模块 的 
ES6 功能 。 在 使 用 React 的 构建 工具 时 ， 将 利用 Babel 转换 器 将 此 
语法 转换 为 “标准 ”JavaScript。 
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2.2.4 jQuery 

最 后 值得 一 提 的 是 jQuery， 它 或 许 是 最 知名 和 最 常用 的 
JavaScript 库 。 jQuery 是 一 个 库 , 简化 了 对 HTML 元 素 、DOM 操作 、 
pad 动画 和 Ajax 调用 的 选择 过 程 。 它 使 用 一 种 抽象 了 不 同 浏 

览 器 之 间 的 实现 差异 的 API 以 做 到 这 一 点 。 该 库 是 在 2006 年 首次 

推出 的 ， 当 时 为 了 解决 浏览 器 之 间 的 差异 ， 重 复 编写 相同 的 特性 是 
很 常见 的 。 

jQuery 不 像 Angular、Knockout 和 React 一 样 ， 是 一 个 完整 的 
应 用 程序 框架 , 而 只 是 一 个 用 于 帮助 开发 HTML 交互 界面 的 实用 工 
有 具 库 。 基 于 这 个 原因 ， 本 书 不 包含 更 详细 的 jQuery 篇 章 。 


注意 
解释 框架 和 库 之 间 差 异 的 一 种 简洁 有 效 的 方式 是 : “调用 代码 
的 是 框架 ， 而 代码 调用 的 则 是 库 .” 


2.3 CSS 框架 


前 端 开发 者 和 设计 人 员 讨 厌 为 所 从 事 的 每 个 项 目 “ 重 新 发 明 轮 
子 ( 即 重复 基础 性 工作 )”。 基 于 这 个 原因 ， 直 到 几 年 前 ， 网 页 设计 师 
们 都 拥有 自制 的 小 CSS 类 和 HTML 片段 集 ， 重 用 在 自己 的 所 有 作 
品 中 。2010 年 ，Twitter 开发 团队 决定 发 布 自制 的 CSS 库 供 公众 使 
用 。 后 来 其 他 公司 和 团队 也 做 了 同样 的 事情 ， 但 其 中 只 有 极 少数 能 
与 Bootstrap 相 媲 美 

下 面 儿 节 在 介绍 Bootstrap 之 后 ,还 将 介绍 GitHub 的 CSS 框架 
Primer、 由 Google 开发 的 较 新 但 颇 有 前 途 的 Material Design Lite， 
此 外 将 介绍 Semantic UI( 一 个 更 为 面向 组 件 的 CSS 方法 框架 )。 


2.3.1 Bootstrap 
最 流行 的 CSS 框架 是 最 初 发 布 的 名 为 Twitter Blueprint 的 框架 。 
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之 所 以 这 样 命名 , 是 因为 其 开发 目的 是 为 了 保持 Twitter 所 开发 的 各 
个 网 站 之 间 的 一 致 性 。 后 来 在 2011 年 夏天 作为 一 个 开源 项 目 发 布 
时 ， 它 被 重新 命名 为 Bootstrap 。 随 后 它 成 为 GitHub 上 最 受 欢迎 的 
库 ， 拥 有 超过 10 万 颗 星 

Bootstrap 包含 一 组 基于 CSS 和 HIML 的 模板 , 用 于 美化 表单 、 
元 素 、 按 钮 、 导 航 、 排 版 以 及 一 系列 其 他 UI 组 件 。 它 还 附带 可 选 
的 JavaScript 插件 ， 以 改善 组 件 的 交互 性 。 

Bootstrap 是 优先 面向 移动 设备 的 框架 ,基于 一 个 用 于 布局 屏幕 
组 件 的 自 适应 式 12 列 网 格 系统 。 例 如 , 下 例 是 一 个 能 够 自 适 应 设备 
屏幕 大 小 的 网 格 的 代码 。 


<div class="row"> 

<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col= 
sm-6 .col-md-8</div> 

<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
</div> 


这 个 自 适应 网 格 示 例 对 于 不 同 的 尺寸 采用 不 同方 式 进行 显示 : 
e 在 普通 桌面 上 ， 两 个 单元 格 将 相 邻 显示 ， 第 一 个 单元 格 占用 
八 列 ， 第 二 个 则 占用 四 列 ( 正 常 大 小 屏幕 的 网 格 行为 由 以 
col-md- 开 头 的 类 定义 )。 
e 在 智能 手机 (或 称 超 小 /XS 屏幕， 由 类 前 级 col-xs- 标 识 ) 上 ， 
第 一 个 单元 格 将 占用 全 部 宽度 ， 而 第 二 个 单元 格 将 新 起 一 
行 ， 并 使 用 一 半 的 宽度 。 
e 在 平板 电脑 (小 屏幕 ， 由 col-sm- 标 识 ) 上 ， 第 一 个 单元 格 将 只 
使 用 六 列 ， 第 二 个 单元 格 继承 了 较 小 尺寸 的 定义 ， 因 此 这 两 
个 单元 格 每 个 将 各 占 一 半 的 宽度 。 
如 果 想 知道 组 件 的 外 观 到 底 如 何 , 只 需要 查看 Twitter 即 可 。 完 
全 使 用 Bootstrap 开发 的 应 用 程序 的 观感 就 像 该 著名 社交 网 站 一 样 ， 
如 图 2-1 和 图 2-2 所 示 。 
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Dropdown ~ 


Action 
Another action 


Something else here 


Separated link 


2-1 Bootstrap 创建 的 下 拉 菜 单 
Project Name | Home Avout Contact Dropsown- | Search Submit 
图 2-2 导航 栏 
除了 标准 导航 和 菜单 之 外 ， 还 有 一 个 有 价值 的 组 件 称 为 
Jumbotron， 如 图 2-3 所 示 。 它 非常 适合 作为 头条 内 容 吸 引 访客 的 


注意 。 


Hello, world! 


This is a simple hero unit, a simple jumbotron-style component for calling 
extra attention to featured content or information. 


Learn more 


2-3 Jumbotron 


当然 ， 也 可 以 改变 风格 ， 用 你 品牌 的 颜色 构建 自己 的 主题 。 这 
可 通过 更 改 Bootstrap 文件 中 的 某 些 变量 并 重新 编译 CSS 文件 来 实 
现 ， 或 使 用 官方 网 站 上 的 Customize Bootstrap 下 载 页 面 来 完成 。 

在 此 只 是 对 这 种 强大 CSS 框架 的 一 个 简要 介绍 , 第 4 章 将 更 详 
细 地 介绍 它 。 

Bootstrap 并 不 是 唯一 的 CSS 框架 , 因为 已 经 发 布 了 其 他 许多 框 
架 (很 多 已 经 消失 )， 特 别 是 网 格 系统 。 还 有 其 他 三 个 CSS 框架 特别 
值得 一 提 ， 其 中 第 一 个 是 GitHub 的 Primer CSS 。 
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2.3.2 Primer CSS 

GitHub 将 其 内 部 设计 指南 作为 一 个 名 为 Primer CSS 的 开源 项 
目 发 布 。 这 个 框架 的 特性 不 像 Bootstrap 那样 完整 。 例 如 ， 尽 管 有 一 
个 网 格 系统 ， 但 它 不 是 自 适应 的 。 但 是 如 果 你 喜欢 GitHub 的 UI 设 
计 方 法 ,这 个 框架 易于 使 用 ,并 且 制 作 精 良 。 它 还 包括 著名 的 octicons 
字体 图 标 库 。 如 图 2-4 所 示 。 


2 Account 


@ Profie 
3 Emails 


‘BNotifications 


2-4 使 用 Primer CSS 框架 创建 的 导航 栏 


有 一 个 有 价值 的 组 件 称 为 blank slate， 在 内 容 区 域 没 有 显示 内 
容 时 应 当 使 用 它 ， 如 图 2-5 所 示 。 


FY 


This is a blank slate 
No information available at this time. Come back later. 


2-5 blank slate 组 件 


由 于 界面 风格 很 大 程度 上 是 一 个 个 人 选择 ， 如 果 你 不 是 Twitter 
或 GitHub 风格 的 忠实 粉丝 ， 那 么 可 能 会 喜欢 Google 的 Material 
Design Lite 。 


2.3.3 Material Design Lite 

Material Design Lite(MDL) 是 由 Google 创建 的 CSS 框架 ， 旨 在 
将 源 质 设计 (Material Design) 理 念 引入 Web 开发 。 与 Bootstrap 框架 
和 Primer CSS 框架 不 同 ，Material Design Lite 是 CSS 和 JavaScript 
的 组 合 ， 其 中 框架 中 的 元 素 样式 和 类 在 运行 时 由 为 组 件 添 加 额外 行 
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为 的 JavaScript 库 增强 。 从 图 2-6 和 图 2-7 中 所 示 的 组 件 示例 中 可 以 
看 出 ， 该 设计 与 Android 应 用 程序 的 观感 非常 相似 。 


三 Project Name 


2-6 使 用 MDL 创建 的 导航 


BUTTON ©@ 


2-7 ”使 用 MDL 创建 的 按钮 


官方 网 站 还 提供 了 一 些 使 用 Material Design Lite 构建 的 网 站 模 
板 ， 可 作为 学 习 该 框架 的 起 点 。 


2.3.4 Semantic UI 
最 后 一 个 值得 一 提 的 CSS 框架 是 Semantic U1。 顾名思义 ， 它 
给 出 的 CSS 类 名 比 其 他 框架 给 出 的 更 容易 理解 。 例 如 ， 要 使 用 主 配 
色 设 置 按钮 的 样式 ， 可 以 使 用 <button class="ui primary button">。 
Semantic UI 也 有 自己 的 自 适 应 布局 ， 其 设计 基于 16 列 网 格 : 


<div class="ui grid"> 
<div class="four wide column"></div> 
<div class="four wide column"></div> 
<div class="four wide column"></div> 
<div class="four wide column"></div> 
<div class="two wide column"></div> 
<div class="eight wide column"></div> 
<div class="six wide column"></div> 

</div> 
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这 种 自然 语言 式 的 命名 只 是 更 深奥 、 近 平 哲学 的 论证 的 冰山 一 
角 ， 该 论证 催生 了 Semantic UI, 后 者 的 目标 是 减少 编程 领域 概念 和 
相关 的 人 类 认识 领域 概念 之 间 的 技术 性 障碍 。 

Sematic UI 附带 一 个 默认 主题 , 但 也 有 一 些 能 够 提供 Bootstrap、 
Primer CSS 和 Material Design 观感 的 其 他 主题 可 用 。 

除了 此 处 简单 的 介绍 外 ， 本 书 不 再 更 多 袭 述 Semantic UI， 但 如 果 你 对 
它 的 方法 感 兴趣 ， 笔 者 建议 查看 相关 学 习 网 站 : http://leamsemantic.cony/。 


2.4 包 管 理 器 


由 于 使 用 ASPNET Core MVC 开发 现代 Web 应 用 程序 时 , 需要 
大 量 的 组 件 、 库 和 工具 ， 因 此 需要 采取 一 些 措施 ， 以 保持 所 有 内 容 
得 到 良好 组 织 ， 自 动 化 执行 安装 和 更 新 ， 以 及 维护 所 有 依赖 关系 。 
此 时 使 用 包 管 理 器 可 谓 是 得 心 应 手 。 包 管理 器 从 官方 存储 库 中 下 载 
组 件 和 工具 ， 管 理 所 有 依赖 关系 ， 只 需要 从 源 存储 库 中 签 出 项 目的 
开发 环境 ， 即 可 简单 地 建立 该 开发 环境 的 一 个 本 地 副本 。 

本 书 将 介绍 以 下 包 管 理 器 : 

e NuGet， 用 于 管理 NET 库 和 组 件 

e Bower， 用 于 JavaScript 和 CSS 框架 

e NPM， 用 于 工具 和 服务 器 端的 JavaScript 库 

Bower 专门 用 于 管理 客户 端的 依赖 关系 ， 而 NuGet 和 NPM 可 
用 于 管理 所 有 依赖 关系 ， 这 正 是 本 书 使 用 它们 的 方式 。 


2.4.1 NuGet 

NuGet 是 .NET 中 的 默认 包 管 理 器 , 已 被 集成 到 Visual Studio 的 
多 个 版 本 中 。 在 ASPNET Core 中 ， 项 目 中 的 所 有 引用 都 保存 为 项 目 
定义 文件 (.csproj) 中 的 PackageReference 条 目 ， 如 代码 清单 2-7 所 示 。 
所 有 内 容 ， 甚 至 包括 对 基础 类 库 的 核心 库 ( 全 部 打包 在 Microsoft. 
AspNetCore.All 元 包 中 ) 的 引用 ， 都 是 通过 NuGet 包 检 索 的 。 
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代码 清单 2-7: WebApplication.csproj 


<Project Sdk="Microsoft.NET.Sdk.Web"> 
<PropertyGroup> 
<TargetFramework>netcoreapp2.0</TargetFramework> 
</PropertyGroup> 
<ItemGroup> 
<PackageReference Include="Microsoft.AspNetCore.All" 
Version="2.0.0" /> 
<PackageReference Include="Newtonsoft.Json" Version= 
se f> 
</ItemGroup> 
<ItemGroup> 
<DotNetCliToolReference 
Include="Microsoft .VisualStudio.Web.CodeGeneration.Tools" 
Version="2.0.0" /> 
</ItemGroup> 
</Project> 


除了 手动 将 它们 添加 到 .csproj 文件 外 ， 与 以 前 的 版 本 一 样 ， 软 
件 包 也 可 以 通过 新 设计 的 Package Manager UI( 如 图 2-8 所 示 ) 或 通过 
包 管理 器 控制 台 安 装 : 


Browse 


Installed Updates NuGet Package Manager WebApplication4 
ch (cult 日 p -| Ll pee wo -I 


C4 NewtonsoftJson 
Newtonsoft.Json by lames Nowton-King 43.2M downloade v301 
Json NET is a popular high-performance JSON framework for -.. 


Version: Latest stable 901 ~ Instal 
EntityFramework by Microsoft 23.2M downloads v613 
Entity Framework is Microsoft's recommended data access tech. © options 
NUnit by charle Pocle, 7.4M downloads v350 Description 
NUnit is a unit-testing framework for all .NET languages with a. Json NET is a popular high-performance JSON framework for .NET 
Version: 901 
jQuery byjQuery Foundation Ine. 27.8M downloads 41 A i 
Incompatible: Use Bower instead rn a 
yd nt i License: baps//imw ghub comlormesNKNemtoreolt loon 
bootstrap by Twitter Inc. 8.11M downloads 337 Date published: Wednesday June 22, 2016 (6/22/2016) 
Sepa et i Project URL: http://www newtonsoft com/son 
Bootstrap framework in CSS, Indudes fonts and JavaSaipt 
Report Abuse: htips//www nuget.org/packages/ 
AutoMapper by jmmy Booard 641M downloads v520 NewtonsoftJsom/9.0.1/ReporiAbuse 


图 2-8 Visual Studio 2017 中 的 包 管 理 器 界面 


PM> Install-Package Newtonsoft.Json 


如 果 你 在 以 前 版 本 的 ASPNET 中 使 用 过 NuGet， 则 在 使 用 
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ASPNET Core 时 需要 考虑 一 个 很 大 的 概念 差异 。 使 用 ASPNET Core 
时 ， 只 有 服务 器 端的 依赖 关系 应 通过 NuGet 引用 和 检索 。 对 于 客户 
端 依赖 关系 ， 微 软 决 定 依靠 另 一 种 非常 受 欢迎 的 包 管 理 器 一 一 
Bower， 它 是 专 为 此 目的 而 设计 的 。 


2.4.2 Bower 
Bower 是 一 种 非常 简易 的 工具 。 与 NuGet 一 样 ， 需 要 在 名 为 
bowerjson 的 JSON 文件 中 指定 在 项 目 中 引用 的 包 ， 如 代码 清单 2-8 
所 示 。 
代码 清单 2-8: bowerjson 
| 
"name": "asp.net", 
"private": true, 
"dependencies": { 
"bootstrap™: "3.3:6"5 
wor 2 
"jquery=validation™s "L140", 
"jquery-validation-unobtrusive": "3.2.6", 
"jquery-file-upload":"https://github.com/blueimp/jQuery 
-File-Upload/" 
} 
} 


你 可 能 已 经 在 代码 清单 2-8 中 注意 到 ,可 以 用 很 多 符号 来 指 代 包 : 
e 最 常见 的 就 是 使 用 在 Bower.io 上 注册 的 包 名 。 当 以 这 种 方式 
引用 时 , Bower 将 下 载 在 注册 包 时 所 指定 的 整个 git 存储 库 。 
e 另 一 种 方式 是 直接 指定 从 中 下 载 包 的 gtt 存储 库 或 svn 存储 库 。 
e 最 后 , 也 可 以 使 用 标准 URL。 在 这 种 情况 下 , 将 从 存储 了 包 

的 URL 处 下 载 包 (如 果 文 件 是 压缩 的 ， 则 将 解压 缩 )。 
在 控制 台 上 输入 bower install 时 ， 所 有 包 将 直接 从 它们 的 存储 
位 置 下 载 并 保存 在 名 为 bower_components 的 文件 夹 中 。 接着 Bower 
停止 执行 。 如 何 使 用 它们 取决 于 你 。 可 以 直接 从 文件 下 载 后 的 位 置 
引用 它们 ， 或 者 为 保持 整个 项 目 整洁 ， 可 按 推 荐 方式 ， 将 所 需 文件 
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复制 到 应 用 程序 的 文件 夹 结 构 中 ( 记 住 Bower 可 能 下 载 整个 存储 资 
源 库 )。 
2.4.3 NPM 

节点 包 管 理 器 (Node Package Manager，NPM) 最 初 是 为 了 管理 
Node.js 服务 器 端 包 而 开发 的 ， 但 后 来 也 常用 它 分 发 Node.js 开发 的 
命令 行 工 具 。 与 其 他 包 管理 器 一 样 ，NPM 下 载 名 为 package.json 的 
清单 文件 中 指定 的 包 , 并 将 这 些 包 安装 到 名 为 node modules 的 项 目 
子 文件 夹 中 。 

通常 应 该 在 dependencies 节点 中 指定 包 , 但 在 ASPNET Core 项 目 
语 境 中 ，NPM 将 主要 用 于 安装 任务 运行 程序 及 其 插件 ， 因 此 这 种 情况 
下 ， 包 声明 位 于 devDependencies 节点 中 ， 如 代码 清单 2-9 所 示 。 


代码 清单 2-9: package.json 


. "name": "app", 
"yersion™s “i.00"; 
"private": true, 
"devDependencies": { 
"del "A 2 
Wud dg 
"qulp=eoncat™s "M2 6.1", 
"qulp-Copmin”s "M0...7"s 
"qulp=htnlain®: "A300", 
oulp= GliEy "ss “e200 
"merge-stream": "^1.0.1" 
} 
} 


2.4.4 文件 夹 结 构 

最 后 一 节 分 别 展示 所 有 这 些 引 用 和 清单 文件 在 Solution Explorer 
窗口 以 及 文件 系统 中 的 状态 。 实 质 上 ， 每 个 项 目 可 以 有 三 种 类 型 的 
依赖 关系 ， 这 些 依赖 关系 在 其 相应 的 清单 文件 中 定义 : 用 于 NuGet 
服务 器 端 引用 的 .csproj, 用 于 Bower 客户 端 组 件 的 bowerjson， 以 及 
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用 于 构建 工具 的 package.json。 图 2-9 展示 了 Solution Explorer 项 目 
树 中 显示 的 所 有 依赖 关系 。 

在 底层 文件 系统 中 ， 包 存储 在 各 种 子 文件 夹 中 : Bower 组 件 存 
储 在 wwwroot/lib(Visual Studio 将 它们 存储 在 非 默认 位 置 )，NPM 包 
存储 在 node _ modules。 人 参见 图 2-10。 


Y ”WebApplication4 全 
> bin 
Controllers 
> obj 
Properties 
> Views 


v wwwroot 
css 


images 


4 


“W Dependencies 
Analyzers 
四 NuGet 


六 sDk 
8 Bower 
面 npm 


2-9 ”Solution Explorer 中 显示 的 2-10 ”文件 系统 中 的 依赖 关系 文件 夹 
依赖 关系 


2.5 任务 运行 


bootstrap 

jquery 
jquery-file-upload 
jquery-validation 


jquery-validation-unobtrusive 


任务 运行 程序 (Task runnen 自动 完成 开发 工作 流 的 最 后 一 步 : 构 


建 和 发 布 应 有 
可 能 已 经 使 有 


有 程序。 在 服务 器 端 开发 领域 这 并 不 是 什么 新 鲜 事 。 你 
日 MSBuild 脚本 或 NAnt 任 务 进行 自动 化 构建 工作 多 年 ， 


但 任务 运行 程序 的 概念 对 于 前 端 开发 界 ， 还 是 相当 新 颖 的 。 
此 刻 你 可 能 怀 有 疑虑 ， 为 何 应 该 接受 这 些 “ 小 区 里 新 来 的 孩 
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子 ” 这 是 一 个 非常 合理 的 疑问 。 主 要 原因 是 为 前 端 开发 的 任务 运行 
程序 是 完全 与 服务 器 端 语言 无 关 (language-agnostic) 的 。 因 此 ， 任 何 
人 都 可 以 使 用 它们 ， 从 而 拥有 大 得 多 的 用 户 社区 ， 也 就 意味 着 更 多 
就 绪 的 任务 。 但 是 ， 你 的 经 验 并 非 全 部 都 已 作废 。 如 第 1 章 所 述 ， 
ASPNET Core 项 目的 项 目 定义 仍 使 用 MSBuild 完成 ， 因 此 仍 可 用 
于 构建 应 用 程序 。 


注意 

最 近 , 前 端 开发 社区 中 的 一 部 分 人 (以 使 用 基于 Linux 的 计算 机 
或 Mac 机 的 人 为 主 ) 已 完全 停止 使 用 任务 运行 程序 ， 并 且 转 而 使 用 
名 为 npm 脚本 的 npm 特性 。 这 些 脚 本 只 用 于 调用 操作 系统 命令 、 
专 为 构建 应 用 程序 开发 的 Node.js 应 用 程序 或 所 使 用 框架 (类 似 
Angular 框架 或 React 框架 ) 附 带 的 开发 工具 。 


此 类 工具 的 主要 代表 是 gulp。gulp 基于 代码 ， 依 赖 于 超 小 型 的 、 
互相 连接 的 插件 ， 而 不 是 独立 的 、 依 次 执行 的 任务 。 如 果 这 些 概念 听 
起 来 有 点 模糊 难 懂 ， 代 码 清单 2-10 应 该 有 助 于 澄清 理解 。 


代码 清单 2-10: gulp 配置 文件 示例 


var gulp = require('gulp'); 

var jshint = require('gulp-jshint'); 

Var concat = require('gulp-concat'); 

var minifyCss = require('gulp-minify-css'); 


gulp.task('default', function(done){ 
gulp.src('src/**/*.js') 
-pipe (jshint ()) 
.pipe (concat ('bundle.js')) 
-pipe(gulp.dest('dist ')) 
.on('end', done); 


}); 


gulp.watch('src/**/*.js', ['default']); 


这 些 只 是 代码 。 任 务 首先 使 用 gulp.src0 说 明 必须 处 理 哪些 源 文 
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件 。 接 着 使 用 pipe0 函 数 将 操作 依次 插 接 到 另 一 个 中 ， 最 后 使 用 
gulp.destO 函 数 保存 生成 的 文件 。 
这 只 是 对 gulp 的 一 个 简要 介绍 ， 在 第 6 章 中 有 更 详细 的 描述 。 


2.6 本章 小 结 


微软 技术 堆栈 中 的 现代 Web 开发 工具 不 再 只 是 C# 和 ASPNET。 
它 是 通过 混合 使 用 不 同 的 工具 和 框架 实现 的 ， 每 种 工具 和 框架 都 
使 用 最 适合 其 目的 的 语言 开发 。 这 种 附加 组 件 的 扩散 增加 了 选用 
它们 的 复杂 性 。 由 于 其 中 一 些 组 件 的 易 变 和 短命 ， 这 种 选择 变 得 
愈加 困难 。 后 续 章 节 将 详细 介绍 其 中 最 受 欢迎 的 工具 : Angular 和 
Bootstrap CSS 。 
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Angular 简 析 


本 章 主 要 内 容 : 

理解 Angular 的 基本 概念 

开发 一 个 Angular 应 用 程序 

结合 ASP.NET MVC Core v1 使 用 AngularJS 
探索 Visual Studio 2017 对 Angular 的 支持 


前 一 章 介绍 了 用 于 前 端 开发 的 所 有 框架 ， 其 中 就 包含 Angular。 
本 章 深 入 探讨 Angular， 从 其 基本 概念 开始 ， 逐 步 延伸 到 更 前 
沿 的 话题 。 本 章 第 一 部 分 只 涉及 纯粹 的 客户 端 JavaScript， 仅 需要 一 
个 简易 的 文本 编辑 器 即 可 使 用 它 。 本 章 的 第 二 部 分 将 展示 Visual 
Studio 2017 中 可 用 的 新 集成 环境 以 及 如 何在 ASP.NET Core 应 用 程 
序 中 集成 Angular。 
在 讨论 技术 细节 之 前 , 笔者 需要 强调 的 是 Angular 并 不 是 “万 
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能 药 ” Angular 在 开发 CRUD 应 用 程序 时 极 具 优势 ， 但 在 需要 处 
理 繁 重 的 DOM 操作 或 者 复杂 的 图 形 用 户 界面 的 情况 下 则 并 非 最 
佳 选择 。 本 书 之 所 以 选择 Angular 作为 框架 ， 是 因为 绝 大 多 数 利 
用 ASPNET MVC( 或 任意 服务 器 端 技术 ) 所 开发 的 Web 应 用 程序 
都 更 多 地 涉及 数据 密集 型 操作 而 较 少 涉及 复杂 图 形 用户 界 面 。 


本 章 代 码 下 载 
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本 章 的 相关 代码 可 通过 网 站 www.wrox.com 下 载 。 搜 索 该 书 的 
ISBN(978-1-119-18131-6)， 可 在 第 3 章 的 下 载 部 分 找到 对 应 代码 。 


3.1 Angular 的 基本 概念 


Angular 是 由 Google 与 开源 社区 共同 开发 并 维护 的 网 络 应 用 程 
序 框架 。 它 具备 很 多 功能 特征 ， 比 如 双向 数据 绑 定 、 模 板 、 路 由 、 
组 件 、 依 赖 注 入 等 。 遗 憾 的 是 ， 与 同类 型 的 其 他 所 有 框架 类 似 ， 学 
习 并 使 用 它 的 门槛 较 高 ， 必 须 掌 握 了 一 些 基本 概念 ， 才 能 熟练 地 应 
用 它 。 以 下 罗列 了 Angular 中 最 重要 的 基本 概念 : 
e 模块 : 将 诸如 组 件 、 指 令 、 服 务 等 隶属 一 体 的 功能 模块 聚集 
e 组 件 ， 定义 屏幕 某 部 分 的 行为 。 
e 模板 : 定义 如 何 呈 现 组 件 视图 的 HTML 文件 。 
e 数据 绑 定 : 连接 某 一 组 件 与 其 模板 并 允许 数据 与 事件 在 其 间 
传递 的 处 理 过 程 。 
e 指令 (Directive): 增强 HTML 语法 的 用 户 自 定义 特性 ， 用 于 
为 页 面 上 的 特定 元 素 增加 行为 。 
e 服务 : 独立 于 视图 的 可 重用 功能 模块 。 
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e 依赖 注入 : 为 类 (其 他 服务 或 组 件 ) 提 供 依赖 关系 (大 多 数 情况 
下 是 服务 ) 的 方法 。 
e 元 数据 : 指示 Angular 如 何 处 理 类 ,本 身 是 不 是 组 件 、 模 块 、 
指令 ， 需 要 注入 哪个 服务 等 。 
这 些 术语 目前 听 起 来 可 能 很 抽象 ， 但 在 本 章 接 下 来 的 内 容 里 ， 
通过 开发 一 个 简单 的 单 页 面 应 用 程序 并 应 用 这 些 概 念 ， 它 们 的 含义 
将 逐渐 明朗 。 


Angular 与 AngularJS 对 比 

你 极 有 可 能 已 经 使 用 过 或 是 至 少 听 说 过 AngularJS 1.x。 尽 管 名 
称 相似 ， 本 章 所 讲解 的 Angular 是 一 个 使 用 不 同方 法 、 从 零 开始 开 
发 的 全 新 框架 。 之 前 的 “ 旧 ”AngularJS 1.x. 是 一 个 模型 视图 控制 
器 (Model View Controller，MVC) 框 架 ， 而 Angular 是 一 个 面向 组 件 的 
框架 。 

如 果 你 熟悉 AngularJS, 也 并 不 是 毫 无 益处 。 它 的 很 多 概念 仍然 
是 相关 的 ， 所 以 学 习 Angular 将 不 是 一 件 难事 。 

这 两 者 的 版 本 编号 是 完全 不 同 的 。Angular 采用 语义 版 本 控制 ， 
所 以 每 个 重要 的 新 特性 或 重大 改变 都 将 导致 一 个 新 的 主 版 本 编号 ， 
这 与 Nodejs 以 及 Chrome 的 编号 方式 类 似 。 它 的 第 一 个 版 本 ， 即 
2.0 版 本 ， 是 在 2016 年 9 月 发 布 的 。 最 新 的 长 期 支持 (LTS) 版 本 ， 即 
4.0 版 本 ， 是 在 2017 年 3 月 末 发 布 的 。 而 最 新 的 稳定 版 本 ， 即 5.0 
版 本 ， 是 在 2017 年 10 月 未 发 布 的 。 另 一 方面 ， 自 AngularJS 第 一 
次 发 布 以 来 的 七 年 里 ， 其 版 本 已 从 1.0 升 至 1.6。 

此 外 ,它们 的 官方 网 站 也 是 不 同 的 .如 图 3-] 所 示 , 不 同 于 angularjs.org， 
Angular 的 官方 网 站 是 angulario。 
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画 onefamework -gu x 于 过 = 


© OO |B a 不 | 三 及 四 … 


A NGULAR FEATURES DOCS EVENTS GET STARTED | 
| 


A 


One framework. 
Mobile & desktop. 


GET STARTED 


四 Angular v4.0 is out! Smaller, faster, no biggie LEARN MORE 


图 3-1 Angular 官方 网 站 


3.2 Angular 的 实现 语言 


本 节 的 标题 可 能 看 起 来 很 奇怪 : 既然 Angular 是 一 个 JavaScript 
框架 ， 难 道 它 不 是 用 JavaScript 编写 的 吗 ? 对 这 个 问题 的 回答 既 可 
以 是 “是 ” 也 可 以 是 “ 否 ”。 

Angular 所 采用 的 面向 组 件 的 模块 化 方法 需要 利用 仅 被 ES6 支 
持 的 语言 特性 。 相 同 的 功能 也 可 以 利用 被 大 多 数 浏 览 
(ECMAScript 5 或 ES5) 所 支持 的 “标准 ”JavaScript 来 实现 ， 但 要 以 
更 复杂 与 见长 的 代码 作为 代价 。 

为 避免 复杂 度 ， 同 时 考虑 到 向 ES5 转 码 无 论 如 何 都 是 必需 的 ， 
Angular 开发 团队 决定 选择 TypeScript 作为 开发 语言 。 它 包含 了 支 

框架 模块 化 所 需 的 ES6 的 特性 ， 但 也 增加 了 强 类 型 检验 (如 第 2 
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章 所 述 )。 

开发 者 可 以 使 用 JavaScript 三 种 版 本 (最 广泛 支持 的 JavaScript 
版 本 ES53、 仅 被 最 新 浏览 器 支持 的 JavaScript 版 本 ES6 或 者 
TypeScripb 中 的 任意 一 种 ， 每 个 版 本 都 各 有 优 劣 。 本 书 将 遵循 
Angular 开发 团队 的 建议 ， 使 用 TypeScript。 


3.3 建立 一 个 Angular 项 目 


编写 Angular 应 用 程序 的 方法 有 很 多 ， 可 使 用 在 线 编辑 器 、 利 
用 快速 入 门 示例 或 使 用 Angular-CLI 工具 。 


3.3.1 使 用 在 线 编辑 器 

建立 一 个 Angular 项 目的 最 简单 方法 是 使 用 类 似 于 Plunker 
Chttps:/plnkrco) 的 在 线 网 络 编辑 工具 ， 如 图 3-2 所 示 。 它 允许 开发 
者 直接 在 浏览 器 内 编写 代码 ， 从 而 避免 建立 从 TypeScript 到 
JavaScript 的 转 码 过 程 以 及 对 所 有 文件 进行 多 样 化 捆绑 的 额外 开销 。 


3-2 ”Plunker 中 显示 的 代码 
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由 于 开发 者 无 法 通过 这 类 网 站 部 署 应 用 ， 很 显然 这 种 方式 仅 适 
用 于 编写 演示 程序 或 者 实践 并 尝试 理解 其 运行 机 理 的 情况 。 这 类 网 
站 也 支持 在 浏览 器 上 进行 转 码 ， 但 当 “ 演 示 程 序 ” 的 代码 量 很 大 时 
执行 速度 将 很 慢 。 
3.3.2 ”利用 快速 入 门 示例 

建立 Angular 项 目的 另 一 种 方式 是 将 快速 入 门 示 例 从 Angular 
开发 团队 的 GitHub 资源 库 (https://github.com/angular/quickstart) 克 隆 
到 开发 者 的 本 地 机 器 上 。 开 发 者 仅 需要 按照 README 文件 中 的 指 
示 说 明 进 行 操作 。 下 载 的 文件 包括 package.json 文件 、Angular 所 需 
的 依赖 关系 文件 以 及 生成 和 运行 示例 应 用 程序 需要 的 所 有 脚本 文 
件 。 一旦 通过 npm start 指令 启动 应 用 程序 ， 开 发 者 可 以 增添 或 编辑 
文件 ， 同 时 浏览 器 将 会 自动 刷新 并 显示 更 新 后 的 结果 。 


3.3.3 使 用 Angular-CLI 工具 

建立 Angular 项 目的 最 后 一 种 方法 ， 同 时 也 是 本 章 所 使 用 的 方 
法 ,就 是 使 用 Angular-CLI 工具 ， 该 工具 以 命令 行 作为 接口 。 与 第 1 
章 中 讨论 过 的 dotnet-cli 工具 一 样 , 该 工具 可 以 创建 与 快速 入 门 示 例 
类 似 的 应 用 程序 构架 。 

可 以 使 用 下 列 NPM 命令 安装 该 工具 : 


npm install -g @angular/cli 


一 旦 该 工具 安装 完毕 , 开发 者 可 以 通过 输入 命令 ng new my-app 
建立 第 一 个 Angular 应 用 程序 。 

该 命令 创建 了 名 为 my-app 的 新 文件 来， 增添 了 启动 Angular 
应 用 程序 所 需 的 最 少 文件 ， 并 自动 执行 npm install 下 载 所 有 依赖 
关系 。 

完成 上 一 步 后 ， 进 入 my-app 文件 夹 (cd my-app)， 并 输入 命令 
ng serve --0pen， 便 可 在 默认 浏览 器 中 运行 该 应 用 ( 见 图 3-3)。 
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日 


€" > O | localhost4200 


app works! 


3-3 由 Angular-CLI 生成 的 默认 应 用 程序 


关于 Angular-CLI 工具 的 更 多 信息 

Angular 命令 行 接口 工具 具备 其 他 许多 有 用 的 特性 ， 这 些 特性 
可 简化 Angular 应 用 程序 的 开发 过 程 。 除 了 能 够 提供 客户 端 应 用 程 
序 的 构架 之 外 ， 它 预先 提供 了 利用 Karma 运行 器 执行 单元 测试 的 程 
序 构架 ， 以 及 利用 Protractor 执行 端 对 端 测试 的 程序 构架 。 它 还 提 
供 了 额外 的 指令 用 于 执行 测试 、 执 行 源 代码 分 析 、 生 成 应 用 的 可 部 
署 版 本 ， 以 及 生成 新 组 件 、 服 务 与 类 。 所 有 这 些 其 他 特性 都 超出 了 
本 书 的 范畴 ， 你 可 通过 在 https://cli.angulario 网 站 阅读 官方 文档 自行 
了 解 更 多 信息 。 


3.4 _ Angular 应 用 程序 结构 


下 面 利 用 通过 命令 行 工 具 生 成 的 简单 应 用 程序 构架 示例 ， 来 分 
析 Angular 应 用 程序 (在 文件 夹 /sre 内 ) 的 基本 组 件 组 成 与 结构 。 


3.4.1 应 用 程序 入 口 

该 示例 与 其 他 任何 Angular 应 用 程序 的 入 口 都 是 main.ts 文件 
( 见 代 码 清单 3-1)。 入 口 的 作用 是 编译 应 用 程序 并 引导 其 根 模块 
(AppModule)。 
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代码 清单 3-1: 示例 应 用 程序 的 入 口 (main.ts) 
import './polyfills.ts'; 


import { platformBrowserDynamic } from '@angular/platform- 
browser-dynamic'; 

import { enableProdMode } from '@angular/core'; 

import { environment } from './environments/environment"' ; 

import { AppModule } from './app/app.module'; 


if (environment.production) { 
enableProdMode (); 
} 


platformBrowserDynamic() .bootstrapModule (AppModule); 


3.4.2” 根 模块 

接着 要 分 析 的 文件 位 于 app 文件 夹 中 ， 它 定义 了 应 用 程序 的 根 
模块 ， 即 app.module.ts。 

代码 清单 3-2 所 展示 的 结构 并 不 局 限于 根 模块 ， 它 也 代表 了 其 
他 任意 Angular 模块 的 结构 。 


代码 清单 3-2: 根 模块 (app/app.module.ts) 


import { BrowserModule } from '‘'@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 

import { FormsModule } from '@angular/forms'; 

import { HttpModule } from '@angular/http'; 


import { APPComponent } from './app.component'; 


@NgModule ({ 
declarations: [ 
AppComponent 

], 

imports: [ 
BrowserModule, 
FormsModule, 
HttpModule 

]， 

providers: [], 

bootstrap: [AppComponent] 

}) 
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export class AppModule { } 


该 文件 一 开始 便 通 过 import 语 句 导入 了 在 当前 类 中 引用 的 所 有 
JavaScript 类 。 在 该 示例 中 , 存在 三 个 几乎 会 被 所 有 应 用 程序 使 用 的 
Angular 模块 (BrowserModule、FormsModule 与 HttpModule)、 一 个 
用 于 定义 应 用 程序 根 模块 的 装饰 器 (NgModule) 以 及 一 个 组 件 


(AppComponent)。 
接 下 来 是 模块 的 实际 定义 ， 由 @NgModule 装饰 器 所 修饰 的 
AppModule 类 包含 了 四 个 数组 : 


e 第 一 个 数组 是 declarations 数组 , 它 包含 所 有 属于 该 模块 的 
组 件 。 在 本 示例 中 仅 存 在 一 个 组 件 , 但 随 着 应 用 程序 不 断 改 
进 演化 ， 更 多 组 件 将 会 被 添加 进来 。 

e 接 下 来 的 imports 数组 包含 将 在 本 模块 内 部 使 用 的 所 有 
Angular 模块 。 这 既 包括 结构 模块 ， 也 包括 随 着 应 用 程序 改 
进而 引入 的 自 定义 特性 模块 。 该 示例 添加 了 用 于 处 理 与 浏览 
器 的 交互 、 处 理 HIML 表格 、 执 行 HITP 请 求 的 模块 。 

e 第 三 个 数组 是 名 为 providers 的 空 数组 。 它 之 所 以 是 空 数组 
是 因为 该 应 用 程序 当前 不 使 用 任何 服务 , 但 一 旦 开始 创建 它 
们 ， 则 需要 在 该 数组 内 定义 它们 。 

e 最 后 的 bootstrap 数组 包含 在 应 用 程序 引导 过 程 中 必须 创建 
的 组 件 。 在 该 示例 中 即 为 AppComponent。 

注释 

装饰 器 是 TypeScript 的 一 个 特性 ， 可 用 于 为 某 个 类 添加 元 数据 

信息 。Angular 中 存在 许多 用 于 指示 某 个 类 表征 何 种 Angular 元 素 的 
装饰 器 。 在 这 里 利用 @NgModule 来 识别 Angular 模块 ， 但 还 可 以 利 
用 @Component 来 识别 组 件 ， 或 使 用 @Injectable 来 识别 可 通过 依赖 
注入 完成 注入 的 服务 以 及 其 他 模块 。 
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3.4.3” 根 组 件 
最 后 需要 介绍 的 部 分 是 根 组 件 AppComponent, 它 定义 在 app/app. 
component.ts 文件 中 (如 代码 清单 3-3 所 示 )。 


代码 清单 3-3: 根 组 件 (app/app.component.ts) 


import { Component } from '‘'@angular/core'; 


@Component ({ 
selector: '‘'app-root', 
templateUrl: './app.component.html', 
styleUrls: ['./app.component.css'] 
} 
export class AppComponent { 
title = 'app works!'; 


定义 根 组 件 或 其 他 组 件 的 方法 与 定义 根 模块 的 方法 类 似 。 定 义 
根 组 件 ， 需 要 使 用 装饰 器 (这 次 要 使 用 @Component)， 还 需要 指明 将 
在 HTML 中 使 用 的 用 于 包含 该 组 件 的 selector、 组件 视 图 的 URL( 利 
用 templateUrl 属性 指定 )， 以 及 该 视图 的 特定 样式 (利用 styleUrls 属 
性 指定 )。 

与 模块 不 同 ， 由 于 组 件 具备 行为 ， 因 此 它 的 类 必须 做 出 适当 的 
处 理 ， 例 如 在 本 示例 中 设置 title 属性 的 值 。 本 示例 中 组 件 的 视图 非 
常 简单 ， 仅 显示 了 hl 标记 内 的 title 属性 (如 代码 清单 3-4 所 示 )。 

代码 清单 3-4: 根 组 件 的 模板 (app/app.component.html) 


<h1> 
{{title}} 
</h1> 
当 模 板 很 简单 时 ， 为 避免 创建 仅 包含 一 行 代码 的 HTML 文件 ， 
装饰 器 @Component 提供 了 一 个 名 为 template 的 额外 属性 ， 可 指定 
模板 的 完整 标记 以 替代 其 URL。 如 果 两 者 均 被 指定 ， 则 应 使 用 如 下 
内 联 标记 : 
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template: ‘<hl> {{title}} </hl1>` 


内 联 标 记 也 能 以 跨越 多 行 的 多 行 字 符 串 形式 来 指定 ， 并 将 其 包 
庄 在 反 单 引号 () 之 内 。 需 要 注意 ， 这 里 用 到 的 反 单 引号 〇 ) 并 不 是 单 
引号 ()， 前 者 是 在 ECMAScript 2015(ES6) 中 引入 的 符号 ， 用 于 允许 
跨越 多 行 录入 字符 串 ， 以 使 HTML 的 可 读 性 更 好 。 


提示 

尽管 反 单 引号 () 对 于 普通 用 户 来 说 很 罕见 ， 但 对 于 应 用 程序 开 
发 者 来 说 应 该 多 少 是 有 些 熟 悉 的 ， 因 为 在 诸如 StackOverflow 等 多 
样 化 的 在 线 编程 论坛 上 书写 评论 或 者 在 GitHub 上 发 表 问 题 时 , 正 是 
该 字符 使 得 符合 markdown 标记 语言 标准 (markdown 是 一 种 可 以 使 
用 普通 文本 编辑 器 编写 的 标记 语言 ， 通 过 简单 的 标记 语法 ， 它 可 以 
使 普通 文本 内 容 具 有 一 定 的 格式 ) 的 字符 串 被 排版 为 代码 。 在 US( 美 
式 ) 键 盘 布 局 中 ， 它 位 于 键盘 的 左上 角 。 但 在 其 他 键盘 布局 (如 意 大 
利 式 布局 ) 中 ， 该 字符 并 不 存在 ， 因 而 必须 在 数字 键盘 上 使 用 它 的 
ASCII 码 AltGr+96 来 输入 。 


3.4.4 主 HTML 页 面 
启动 引导 过 程 的 真实 应 用 程序 入 口 是 主 index.html 页 面 (如 代码 
清单 3-5 所 示 )。 


代码 清单 3-5: index.html 


<!ldoctype html> 

<html> 

<head> 
<meta charset="utf-8"> 
<title>MyApp</title> 
<base href="/"> 


<meta name="viewport" content="width=device-width, 
initial-scale=1"> 
<link rel="icon" type="image/x-icon" href="favicon.ico"> 
</head> 
<body> 
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<app-root>Loading...</app-root> 
</body> 
</html> 


如 上 所 示 ，<app-roo 亿 标记 与 根 组 件 中 selector 属性 所 指定 的 值 
相 匹 配 。 引导 过 程 将 在 此 处 注入 由 根 组 件 呈 现 的 视图 。 在 本 示例 中 ， 
视图 仅 是 <hl>app works!</h1>， 但 稍 后 你 将 看 到 ， 它 也 可 以 是 很 复 


杂 的 。 


3.5 数据 绑 定 


到 目前 为 止 , 本 章 简要 说 明了 八 个 Angular 基本 概念 中 的 四 个 ， 
即 模型 、 组 件 、 模 板 与 元 数据 。 代 码 清单 3-5 也 展示 了 一 个 非常 简 
单 的 数据 绑 定 的 示例 ， 用 于 呈现 模板 内 一 个 组 件 的 模型 属性 。 
数据 绑 定 是 在 组 件 与 浏览 器 内 呈现 的 视图 之 间 来 回 传 递 数据 
的 过 程 。Angular 中 共有 四 种 数据 绑 定 类 型 ; 
e 第 一 种 是 插值 (interpolation)， 它 从 组 件 向 浏览 器 发 送 数 据 ， 
并 将 其 作为 一 个 HTML 标记 的 内 容 进行 星 现 。 
e 第 二 种 是 单 向 绑 定 ， 它 仍然 从 组 件 向 浏览 器 发 送 数 据 , 但 将 
其 赋予 一 个 HTML 元 素 的 特性 (attribute) 或 属性 (property)。 
e 接 下 来 是 事件 绑 定 ， 它 从 浏览 器 向 组 件 发 送 数据 。 
e 最 后 一 种 是 双向 绑 定 , 它 使 得 组 件 的 一 个 属性 与 浏览 器 中 一 
个 输入 元 素 所 呈现 的 内 容 保持 同步 。 
接 下 来 逐一 对 其 进行 说 明 。 
3.5.1 插值 
如 果 开 发 者 想 做 的 仅 是 像 呈 现 一 个 HIML 元 素 的 内 容 那 样 呈 
现 浏览 器 内 组 件 的 模型 的 属性 值 ， 实 现 数据 绑 定 的 最 简便 方法 就 是 
插值 。 它 是 通过 将 欲 呈 现 的 表达 式 放 入 双重 大 括号 {{…}} 来 实现 的 。 
其 内 容 可 以 仅 是 组 件 属性 的 名 称 或 是 诸如 字符 串 连 接 的 JavaScript 
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表达 式 。 代 码 清 单 3-6 给 出 了 这 两 种 情况 的 示例 。 

代码 清单 3-6: 插值 的 示例 (app/app.component.html) 

<h1l>{{title}}</h1> 

<p>{{"Hello" + " " + "reader"}}!</p> 

警告 

虽然 技术 上 可 行 ， 但 最 好 避免 在 模板 内 使 用 表达 式 ， 而 是 仅 使 
用 属性 名 。 为 较 好 地 分 割 关注 点 ， 向 模板 传 值 之 前 ， 应 当 由 组 件 来 
实现 连接 或 者 其 他 类 型 的 表达 式 。 
3.5.2 单 向 绑 定 

假如 不 必 像 显示 元 素 内 容 那 样 显示 一 个 属性 ， 而 是 需要 将 其 传 
送 给 一 个 HTML 元 素 的 特性 , 那么 需要 使 用 一 种 更 显 式 的 语法 来 实 
现 单 向 绑 定 。 这 是 通过 将 特性 名 放 入 中 括号 中 […] 并 像 对 待 一 个 静 
态 值 一 样 使 用 属性 名 赋值 来 实现 的 。 

例如 ， 可 采用 如 下 方式 设置 输入 元 素 的 值 : 

<input type="text" [value]="title" /> 

但 该 操作 并 不 局 限于 元 素 的 特性 ， 也 可 以 设置 样式 属性 : 


<hl [style.color]="color" >This is red</h1> 


利用 上 面 这 行 代码 ， 如 果 组 件 的 color 属性 的 值 为 red， 那 么 该 
标题 将 显示 为 红色 。 

实际 上 , 任何 HTML 元 素 的 任 一 属性 均 能 通过 这 种 单 向 绑 定 方 
法 进行 设置 。 例 如 ， 除 了 通过 插值 这 一 方法 之 外 ， 也 可 以 通过 设置 
标题 的 innerText 属性 的 值 来 设置 它 的 内 容 : 


<hl [innerText]="title"></hl> 
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3.5.3 ”事件 绑 定 

为 从 模板 向 组 件 发 送 数据 (或 者 触发 事件 )， 我 们 采用 一 种 类 似 
的 方案 。 在 此 将 任 一 有 效 的 HIML 事件 的 名 称 放 入 小 括号 中 (…)， 
并 将 其 赋予 组 件 的 一 个 方法 。 代 码 清单 3-7 展示 了 一 个 切换 标题 颜 
色 的 事件 的 示例 ， 该 事件 被 包含 在 一 个 带 有 内 联 模 板 的 组 件 中 。 


代码 清单 3-7: 事件 绑 定 (app/app.component.ts) 
import { Component } from '@angular/core'; 


@Component ({ 
selector: 'app-root', 
template: ‘<hl [style.color]="color">{{title}}</hl> 
<button (click)="setColor()">Change Color</button>. 
} 
export class AppComponent { 
title = 'app works!'; 
color Sn 


setColor(){ 
if (this.color==="") 
this.color="red"; 
else 
this.color=""; 
} 
} 
对 比 单 向 /事件 绑 定 与 AngularJS 
如 果 你 曾 用 过 AngularJS， 那 么 可 能 已 经 注意 到 诸如 ng-style、 
ng-src 等 ng-* 形 式 的 所 有 指令 均 没 有 被 使 用 。 现 在 ， 把 名 称 放 入 中 
括号 内 就 足以 解决 问题 了 。 这 一 点 也 同样 适用 于 事件 。 不 必 再 使 用 
AngularJS 的 ng-click 事件 。 可 以 在 小 括号 内 使 用 任意 事件 。 这 意味 
着 开发 团队 需要 维护 的 代码 更 短 了 ,代码 中 可 能 出 现 的 错误 更 少 了 ， 
用 户 使 用 起 来 更 便捷 了 。 


3.5.4 双向 绑 定 
最 后 要 介绍 的 是 所 有 绑 定 方式 中 功能 最 强大 、 能 够 在 模板 与 组 
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件 的 模型 之 间 保 持 同 步 的 双向 绑 定 。 这 是 通过 新 的 语法 [agModeD] 
来 实现 的 。 开 发 者 仅 需 要 对 欲 绑 定 的 输入 元 素 使 用 这 一 指令 ， 模 型 
的 任何 更 改 都 将 自动 反映 在 视图 中 ， 同 时 输入 域 的 任意 变化 都 会 更 
新 组 件 的 属性 。 代 码 清单 3-8 展示 了 一 个 双向 数据 绑 定 示 例 。 


代码 清单 3-8: 双向 绑 定 (app/app.component:ts) 


import { Component } from '@angular/core'; 


QComponent ({ 
selector: '‘'app-root', 
template: “ 
<h1l>{{title}}</h1l> 
<input type="text" [(ngModel)]="title" /> 


} 

export class AppComponent { 
title = 'app works!'; 

} 


这 种 标记 法 第 一 眼看 上 去 有 点 奇怪 ， 但 经 过 一 段 时 间 之 后 便 能 
领情 其 深意 。 它 实际 上 是 一 个 位 于 单 向 绑 定 内 部 的 事件 绑 定 ， 因 为 
从 组 件 获得 的 模型 又 被 发 送 回去 。 这 种 标记 法 被 形容 为 “盒子 中 的 
足球 ”或 是 “盒子 中 的 香 柳 ”( 这 种 比喻 有 助 于 开发 者 记 住 小 括号 是 
位 于 中 括号 内 的 )。 


3.6 指令 

Angular 支持 两 种 类 型 的 指令 : 结构 指令 和 特性 指令 。 结 构 指 
令 通过 添加 或 删除 DOM 元 素来 修改 页 面 的 布局 。 特性 指令 改变 现 
有 元 素 的 外 观 。 

Neglf 与 NgSwitch 都 是 内 置 的 结构 指令 ， 而 NgModel、NegStyle 
与 NgClass 都 是 内 置 的 特性 指令 。 

下 面 看 看 如 何 使 用 ngFor 指令 来 重复 处 理 一 个 对 象 数组 : 
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<ul> 
<l1i *ngFor="]let item of array">{{item.property}}</1i> 
</ul> 


对 于 数组 的 每 一 项 ，Angular 将 复制 使 用 *ngFor 指令 的 HTML 
(在 上 面 的 示例 片段 中 即 为 <lji> 元 素 )。 一 旦 数组 中 加 入 了 新 对 象 ， 该 
指令 将 自动 在 DOM 中 添加 该 HTML 元 素 的 拷贝 ， 而 当 移 除 一 个 对 
象 时 ， 相 应 元 素 也 将 从 DOM 中 移 除 。 

代码 清单 3-9 展示 了 如 何 应 用 *ngFor 指令 显示 在 夏威夷 科 纳 举 
办 的 2016 年 世界 铁人 赛 中 前 五 强 的 信息 。 在 <li> 元 素 中 ， 圆 点 标记 
用 于 访问 重复 项 的 属性 。 

代码 清单 3-9: 使 用 *ngFor 指令 来 显示 一 个 对 象 数组 


import { Component } from '@angular/core'; 


@Component ({ 
selector: '‘'app-root', 
template: “ 
<h1>Kona Ironman Top 5 men</h1> 
<ol> 


<li *ngFor="let athlete of athletes">{{athlete.name}} 
({{athlete.country}}): {{athlete.time}}</1i> 
</o1> 


} 

export class AppComponent { 

athletes = [ 
{name:"Jan Frodeno", country: "DEU", time: "08:06:30"}, 
{name:"Sebastian Kienle", country: "DEU", time: "08:10:02"}, 
{name:"Patrick Lange", country: "DEU", time: "08:11:14"}, 
{name:"Ben Hoffman", country: "USA", time: "08:13:00"}, 
{name:"Andi Boecherer", country: "DEU", time: "08:13:25"} 


3.7 ”服务 与 依赖 注入 
Angular 还 有 两 个 更 重要 的 基本 概念 ， 这 两 者 总 是 联系 紧密 ， 它 
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们 是 服务 与 依赖 注入 。 


在 代码 清单 3-9 中 ， 将 运动 员 列 表 “ 硬 编码 ”在 组 件 的 声明 中 。 


然而 ， 这 个 示例 不 具有 现实 意义 (甚至 不 具备 良好 的 实用 性 )。 通 


| 


常 


这 样 的 数据 项 列表 是 通过 外 部 数据 源 获取 的 ， 就 像 调用 一 个 HTTP 


服务 那样 。 在 介绍 与 外 部 数据 源 的 依赖 关系 前 ， 首 先 需 要 建立 一 
外 部 服务 ， 该 服务 负责 获取 运动 员 列 表 ， 并 使 用 依赖 注入 将 其 传 
给 组 件 。 

首先 ， 必 须 创建 服务 的 类 。 这 个 类 也 没什么 特别 的 。 它 仅 是 
个 普通 的 TypeScript 类 ， 包 含 了 用 于 返回 所 需 数据 的 方法 。 唯 一 


从 


送 


特 


别 的 是 , 由 于 需要 通过 依赖 注入 来 实现 注入 , 它 必 须 由 @Injectable() 


装饰 器 来 装饰 (如 代码 清单 3-10 所 示 )。 
代码 清单 3-10: 运动 员 信息 服务 类 (app/athlete.service.ts) 
import { Injectable } from '@angular/core'; 
@Injectable() 
export class AthleteService { 


getAthletes (){ 
return [ 


{name:"Jan Frodeno", country: "DEU", time: "08:06:30"}, 
{name:"Sebastian Kienle", country: "DEU", time: "08:10:02"}, 


{name:"Patrick Lange", country: "DEU", time: "08:11:14" 


} 


{name:"Ben Hoffman", country: "USA", time: "08:13:00"}, 
{name:"Andi Boecherer", country: "DEU", time: "08:13:25"} 


]; 
} 


可 对 组 件 进行 重 构 ， 以 调用 服务 类 中 的 getAthletes 方法 ， 该 
法 以 构造 函数 参数 的 形式 被 注入 (如 代码 清单 3-11 所 示 )。 
代码 清单 3-11: 重 构 后 的 应 用 程序 组 件 (app/app.component.ts) 


import { Component } from '‘'@angular/core'; 
import { RARthleteService } from './athlete.service'; 


@Component ({ 


方 
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selector: '‘'app-root', 
templateUrl: "app.-component .htm1l' 
providers: [AthleteServicel] 

}) 

export class AppComponent { 
athletes: Array<any>7 


constructor (private athleteService: AthleteService){ 
this.athletes=athleteService.getAthletes (); 
} 
} 


代码 清单 中 的 加 粗 内 容 是 对 该 组 件 类 的 主要 改动 ， 目 的 是 为 了 
激活 注入 : 

e@ 构造 函数 声明 一 个 AthleteService 类 型 的 参数 。 

e 装饰 器 增加 一 个 额外 参数 providers, 它 包含 能 被 注入 的 类 的 

列表 。 

e 显而易见 ， 为 能 被 使 用 ， 类 需要 事先 导入 。 

如 果 需 要 在 更 多 组 件 中 使 用 一 个 服务 ， 那 么 最 好 在 NgModule 
的 providers 数组 中 对 这 个 服务 进行 注册 。 

人 至此， 本 章 已 经 讲解 了 Angular 的 主要 概念 。 在 转 而 讨论 如 何 
在 ASPNET Core 应 用 程序 中 集成 Angular 前 ， 下 面 儿 节 将 展示 
Angular 的 其 他 一 些 特性 , 例如 组 件 的 层次 结构 、HTTP 与 数组 操作 
以 及 表单 验证 。 

注意 

如 果 使 用 过 AngularJS v1, 那么 可 能 已 经 注意 到 , 使 用 Angular 
来 开发 服务 比 AngularJS 更 简单 。 所 有 的 factory、provider、service、 
constant 等 都 被 合并 为 一 类 服务 ， 即 一 个 普通 的 TypeScript 类 。 


3.8 多 重组 件 


到 目前 为 止 ， 我 们 仅 使 用 了 应 用 程序 的 根 组 件 ， 但 在 更 复杂 的 
应 用 程序 中 通常 并 非 如 此 。 更 复杂 的 应 用 程序 常 具 有 更 多 能 包含 其 
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他 组 件 的 嵌 套 组 件 。 而 将 应 用 程序 分 割 成 多 重组 件 的 方式 又 带 来 了 
管理 组 件 间 通 信 的 需求 。 本 节 将 基于 代码 清单 3-11 中 所 展示 的 应 用 
程序 讨论 这 方面 的 内 容 。 

目前 ， 根 组 件 AppComponent 作为 唯一 的 组 件 ， 完 成 了 所 有 功 
能 。 它 呈现 标题 、 连 接 服务 、 显 示 列 表 并 且 显 示 各 项 的 内 容 细 节 。 
为 使 其 更 加 模块 化 ， 一 个 更 好 的 实现 方案 将 使 用 下 列 组 件 : 

e AppComponent 仅 负责 呈现 应 用 程序 标题 , 并 包含 AthleteList 

Component。 

e AthleteListComponent 连接 服务 , 并 列 出 AthleteComponents 。 

e AthleteComponent 显示 运动 员 的 详细 信息 。 

手动 添加 文件 费时 又 容易 出 错 ， 为 了 简化 这 一 任务 并 减少 重复 
工作 ， 可 以 使 用 Angular CLI 工具 。 

在 应 用 程序 所 在 的 文件 夹 下 ， 在 命令 提示 符 中 输入 ng generate 
component AthleteList 时 ,工具 将 创建 一 个 新 文件 夹 ， 并 在 其 中 添加 
名 为 athlete-list.component.ts 的 新 组 件 (以 及 该 组 件 需要 的 其 他 所 有 
文件 )。 它 也 会 更 新 根 模块 AppModule， 在 模块 所 使 用 的 组 件 的 
declarations 列表 中 包含 这 个 新 创建 的 组 件 。 

现在 可 以 开始 将 获取 并 显示 运动 员 列 表 的 代码 逻辑 从 根 组 件 
迁移 至 AthleteListComponent。 

代码 清单 3-12 与 代码 清单 3-13 展示 了 AthleteListComponent 
组 件 与 根 组 件 这 两 个 需要 被 更 改 的 组 件 的 新 代码 。 为 简洁 起 见 ， 标 
记 没 有 分 布 于 多 个 分 离 的 文件 中 ， 而 以 内 联 形式 呈现 。 

代码 清单 3-12: 需要 被 更 改 的 AthleteListComponent 的 代码 (app/athlete 
-list/athlete-list.component.ts) 


import { Component } from '‘'@angular/core'; 
import { AthleteService } from '../athlete.service'; 


@Component ({ 
selector: 'app-athlete-list', 
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template: ~、 
<ol> 
<li *ngFor="let athlete of athletes">{{athlete.name}} 
({{athlete.country}}): {{athlete.time}}</1i> 
</o1> 


7 
} 
export class AthleteListComponent { 


athletes: Array<any>; 


constructor (private athleteService: AthleteService){ 
this.athletes=athleteService.getAthletes (); 
} 


} 


代码 清单 3-12 包含 了 原本 位 于 根 组 件 中 的 完全 一 样 的 代码 , 但 
使 用 了 不 同 的 选择 器 app-athlete-list 。 它 是 根 组 件 用 于 引用 
AthleteListComponent 的 “标记 ”。 


代码 清单 3-13: 根 组件 的 代码 (app/app.component.ts) 
import { Component } from '‘'@angular/core'; 


@Component ({ 
selector: '‘'app-root', 
template: ‘<hl>Kona Ironman Top 5 men</h1> 
<app-athlete-list>Loading athlete list...</app-athlete-list>. 
} 
export class AppComponent { 


} 


现在 的 代码 变 得 更 简洁 ， 根 组 件 并 不 包含 实际 代码 ， 而 仅 在 其 
模板 中 引用 了 新 创建 的 控制 器 。 此 刻 ， 应 用 程序 的 执行 效果 毫 无 变 
化 ， 但 每 个 组 件 有 各 自 的 任务 ， 更 好 地 实现 了 关注 点 的 分 离 。 但 我 
们 还 可 以 更 进一步 ， 使 显示 运动 员 细 节 的 标记 与 代码 逻辑 位 于 各 上 自 
的 组 件 中 。 

与 之 前 一 样 ， 利 用 Angular CLI 工具 ， 创 建 一 个 新 组 件 ， 将 其 
命名 为 AthleteComponent。 
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Angular CLI 工具 之 前 在 它 自己 的 文件 夹 下 创建 了 组 件 以 及 与 
样式 、 视 图 及 测试 相关 的 多 个 独立 文件 。 这 是 官方 样式 指南 所 推荐 
的 最 佳 实现 方式 。 但 对 于 像 本 童 示例 这 样 的 较 小 应 用 程序 ， 可 将 所 
有 标记 与 样式 内 联 ， 并 将 文件 置 于 根 文件 夹 中 。 为 了 利用 Angular 


CLI 工具 实现 这 一 点 ， 开 发 者 需要 在 创建 组 件 时 指定 一 些 参数 : 
ng 9 component Athlete --flat=true --inline-template=true 


--inline-style=true --spec=false 


现在 , AthleteListComponent 不 再 呈现 列表 中 运动 员 的 名 字 与 
籍 ， 而 仅 使 用 选择 器 app-athlete 引用 新 组 件 AthleteComponent 的 内 
容 ， 如 下 所 示 : 


<1i *ngFor="let athlete of athletes"><app-athlete></app- 
athlete></1i> 


但 是 还 存在 一 个 问题 。 开 发 者 如 何 告知 子 组 件 显 示 哪 个 运动 员 
的 信息 呢 ? 


3.9 输入 与 输出 属性 


为 解决 向 子 组 件 传递 运动 员 信息 的 问题 ， 组 件 必 须 声明 一 个 输 
入 属性 。 这 是 通过 在 公开 该 属性 的 组 件 中 使 用 @Input 指令 来 实现 
的 。 与 任何 其 他 HTML 属性 一 样 ， 可 在 视图 中 通过 单 向 绑 定 设置 该 
属性 : 


<app-athlete [athlete]="athlete"></app-athlete> 


正如 代码 清单 3-10 与 代码 清单 3-11 所 示 ， 运 动员 列表 是 一 个 
匿名 对 象 的 列表 (与 任意 标准 的 JavaScript 类 似 )。 这 是 有 效 的 , 但 它 
并 没有 利用 TypeScript 强 类 型 的 特性 。 

接 下 来 ， 可 以 手工 或 者 再 一 次 使 用 CLI 工具 创建 model 类 ， 用 
于 保存 数据 (代码 清单 3-14)。 
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代码 清单 3-14: Athlete.ts(app/athlete.ts) 


export class Athlete { 
name: string; 
country: string; 
time: string; 


} 
此 后 ，AthleteComponent 组 件 的 代码 将 如 代码 清单 3-15 所 示 。 
代码 清单 3-15: AthleteComponent 的 代码 (app/athlete.component.ts) 


import { Component, Input } from '@angular/core'; 
import { Athlete } from './Athlete'; 


@Component ({ 
selector: '‘'app-athlete', 
template: “‘{{athlete.name}} ({{athlete.country}}): {{athlete. 


time}}. 


于 
export class AthleteComponent { 


@Input() athlete: Athlete; 
constructor() { } 


} 
请 注意 利用 @Input 对 在 组 件 之 外 公开 的 属性 的 名 称 与 类 型 进 
行 定义 的 方式 。 
同样 ，AthleteListComponent 也 发 生 了 变化 ， 如 代码 清单 3-16 
所 示 。 
代码 清单 3-16: 发 生 了 变化 的 AthleteListComponent 的 代码 
(app/athlete-list.component.ts) 


import { Component } from '‘'@angular/core'; 
import { AthleteService } from './athlete.service'; 
import { Athlete } from "./athlete"; 


@Component ({ 
selector: 'app-athlete-list', 
template: 
«ol> 
<li *ngFor="let athlete of athletes"> 
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<app-athlete [athlete]="athlete"> 
</app-athlete></1i> 
</o1> 
~， 
} 
export class AthleteListComponent { 
athletes: Array<Athlete>; 
constructor (private athleteService: AthleteService){ 
this.athletes=athleteService.getAthletes (); 
} 
} 


假如 存在 一 个 @Input 指 令 , 那 么 必然 也 存在 一 个 @Output 指 令 。 


@Output 指令 用 于 公开 可 在 组 件 内 部 触发 的 事件 。 


下 面 使 用 @Output 指令 来 说 明 如 何 告知 根 组 件 某 用 户 单 击 了 一 


个 运动 员 ， 并 令 其 显示 关于 该 运动 员 比 赛 的 详尽 视图 。 


为 实现 该 功能 ，AthleteListComponent 组 件 必 须 和 单 击 运动 员 


这 一 事件 相 绑 定 ， 同 时 必须 触发 与 单 击 相对 应 的 处 理 程序 中 的 自 
定义 事件 。 代 码 清单 3-17 突出 标识 了 为 实现 这 一 目的 而 新 增 的 代 
码 行 。 


代码 清单 3-17: AthleteListComponent 更 新 后 的 代码 (app/athlete-list. 
component.ts) 


import { Component, Output, EventEmitter } from '@angular/core'; 
import { AthleteService } from './athlete.service'; 
import { Athlete } from "./athlete"; 


@Component ({ 
selector: 'app-athlete-list', 
template: ~ 
<ol> 
<li *ngFor="let athlete of athletes"> 
<app-athlete (click)="select(athlete)" [athlete]="athlete"> 
</app-athlete></1i> 
</o1> 


} 
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export class AthleteListComponent { 
athletes: Array<Athlete>; 
@Output() selected = new EventEmitter<Athlete>(); 


constructor (private athleteService: AthleteService){ 
this.athletes=athleteService.getAthletes (); 
} 


select (selectedRAthlete: Athlete){ 
this.selected.emit(selectedRAthlete) : 


作为 父 组 件 的 根 组 件 AppComponent 监听 所 选 定 的 事件 ， 并 像 对 
待 其 他 事件 一 样 对 其 进行 处 理 。 代 码 清单 3-18 展示 了 所 做 的 更 改 。 


代码 清单 3-18: AppComponent 更 新 的 代码 (app/app.component.ts) 


import { Component } from '@angular/core'; 
import { Athlete } from "app/Athlete"; 


@Component ({ 
selector: '‘'app-root', 
template: ‘<hl>Kona Ironman Top 5 men</h1> 
<app-athlete-list (selected)=showDetails ($event)>Loading 
athlete list...</app-athlete-list> 
You selected: {{fselectedRthlete}} 

} 

export class AppComponent { 
selectedaAthlete: string; 


constructor (){ 
this.selectedaAthlete="none"; 
showDetails (selectedAthlete: Athlete) { 
this.selectedaAthlete=selectedaAthlete .name; 
} 


$event 变量 引用 了 保存 着 被 选中 运动 员 信息 的 事件 参数 。 
运动 员 的 姓名 最 终 显示 于 屏幕 底部 (如 图 3-4 所 示 )。 
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而 | 口 wpp x 十 忆 = mE wpp x 0 
ce ann 廊 | 三 所 TO ocalhost:#200 真 | 二 不 如 
Kona Ironman Top $5 men Kona Ironman Top $ men 

1. Jan Frodeno (DEU): 08:06:30 1. Jan Frodeno (DEU): 08:0630 

了 Sebastian Kienle (DEU): 08:10:02 2. Sebastian Kienle (DEU): 08:10:02 

3. Patrick Lange (DEU): 08:11:14 3. Patrick Lange (DEU): 08:11:14 

4. Ben Hoffman (USA): 08:13:00 4. Ben Hoffiman (USA): 08:13:00 

5. Andi Boecherer (DEU): 08:13:25 5. Andi Boecherer (DEU): 08:1325 
You selected: none You selected: Jan Frodeno 


3-4 ”运动 员 列 表 与 被 选中 的 运动 员 的 信息 


3.10 与 后 端 程序 交互 


所 有 的 主要 概念 都 已 经 解释 完了 ， 你 也 已 经 看 到 了 如 何 通过 多 
重组 件 来 更 好 地 设计 应 用 程序 的 结构 。 然 而 ， 数 据 目 前 都 是 硬 编码 
的 数值 , 而 不 是 来 自 于 服务 器 的 真实 REST API。 本 节 是 转向 探讨 利 
用 ASPNET Core 与 Visual Studio 2017 实现 集成 之 前 的 最 后 一 节 ， 
你 将 学 到 如 何 使 用 Http 模块 与 反射 扩展 (RxJS) 来 连接 远程 信息 源 。 

通过 使 用 舱 套 组 件 与 服务 ， 用 于 获取 运动 员 列 表 的 代码 逻辑 全 
部 位 于 AthleteService 类 。 无 论 是 一 个 静态 .json 文件 还 是 以 JSON 
格式 返回 数据 的 网 页 服务 ， 为 从 这 样 的 JSON 端点 获取 数据 ， 该 
类 是 唯一 需要 修改 的 类 。 在 本 节 中 ， 我 们 使 用 .json 文件 ( 见 代码 
清单 3-19)， 稍 后 还 将 使 用 一 个 利用 ASPNET Core MVC 所 实现 的 
Web API。 


代码 清单 3-19: Athletes.json 文件 


{ 
"data™s | 

{"name":"Jan Frodeno", "country": "DEU", "time": "08:06:30"}, 
{"name":"Sebastian Kienle", "country": "DEU", "time": 
"08:10:02"}, 
{"name":"Patrick Lange", "country": "DEU", "time": 
Oss la 
{"name":"Ben Hoffman", "country": "USA", "time": "08:13:00"}, 
{"name":"Andi Boecherer", "country": "DEU", “time™": 
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"Ds13:25"} 
] 
} 


为 使 用 Http 模块 ， 必 须 告知 应 用 程序 从 哪里 找到 它 。 这 是 通过 
在 AppModule 根 组 件 的 @NgModule 注解 内 的 imports 属性 中 导入 
HttpModule 来 实现 的 。 由 Angular CLI 工具 所 生成 的 代码 ( 见 代 码 清 
单 3-2) 已 经 被 配置 好 了 ， 但 如 果 开 发 者 手动 创建 了 应 用 程序 ， 还 需 
要 手动 完成 这 一 操作 。 
3.10.1 使 用 Http 模块 

现在 可 以 在 服务 类 内 使 用 模块 来 获取 JSON 文件 中 可 用 的 
数据 了 。 代 码 清单 3-20 展示 了 员 信 息 服务 所 对 应 的 完整 代码 。 


代码 清单 3-20: 使 用 http 实现 运动 员 信息 服务 (app/athlete.service.ts) 


import { Injectable } from '@angular/core'; 
import { Athlete } from './Athlete'; 

import { Http, Response } from "@angular/http"; 
import 'rxjs/add/operator/map'; 


@Injectable() 
export class AthleteService { 
constructor (private http: Http)1{} 


getRthletes (){ 
return this.http.get('api/athletes.json') 
.map((r: Response)=><Athlete[]>r.json() .data); 

. 

实现 具体 功能 的 核心 代码 是 http.get 方法 ， 它 经 由 HTTP 连接 
至 一 个 指定 的 URL 并 返回 一 个 RxJS Observable 对 象 。 接 着 它 使 用 
Observable 对 象 的 map 方法 在 数据 被 发 送 回 组 件 之 前 对 数据 进行 修 
改 。 在 本 示例 中 ， 它 返回 JSON 文件 的 data 属性 并 将 其 转换 为 一 个 
Athlete 对 象 的 数组 。 

为 使 其 成 功 运行 ， 与 处 理 其 他 任意 模块 或 服务 一 样 ， 首 先 需 要 
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使 用 构造 函数 注入 Http 模块 。 为 使 应 用 程序 能 正确 编译 ，Http 与 
Response 对 象 以 及 map 方法 都 需要 被 导入 。 最 后 的 这 些 导 入 步骤 之 
所 以 必要 ， 是 因为 JavaScript 的 反射 扩展 是 一 个 庞大 的 库 ， 所 以 最 
好 仅 导 入 那些 实际 使 用 的 部 分 。 


3.10.2 ”处 理 RxJS Observable 

在 运行 示例 前 ， 还 需要 做 一 个 改动 。 在 使 用 硬 编码 得 到 的 数据 
时 ,服务 中 的 方法 直接 返回 由 数据 项 构成 的 数组 。 当 使 用 Http 模块 
时 ， 方 法 所 返回 的 RxJS Observable 无 法 直接 被 *ngFor 处 理 。 

处 理 Observable 的 方法 有 几 种 ， 包 括 订 阅 Observable、 使 用 
async( 异 步 ) 管 道 或 使 用 承诺 。 


1. 订阅 Observable 


处 理 Observable 的 第 一 种 可 选 方式 是 订阅 它 。 


export class AthleteListComponent { 
athletes: Array<Athlete>; 
constructor (Private athleteService: AthleteService){ } 


getAthletes() { 
this .athleteService .getRthletes () 
-Subscribe( 
athletes => this.athletes = athletes 
) 
} 


ngonInit() {this.getAthletes ();} 
} 


代码 现在 不 再 利用 服务 的 方法 的 返回 值 来 设置 属性 athletes, 而 
是 使 用 subscribe 方法 ,并 且 注 册 了 一 个 函数 ， 用 于 将 来 源 于 服务 的 
数组 赋 给 组 件 的 属性 。 还 要 注意 ， 对 该 方法 的 调用 不 再 发 生 在 构造 
函数 中 ， 而 是 在 名 为 ngOnInit 的 方法 中 ， 该 方法 是 在 组 件 初始 化 时 
被 调用 的 。 
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2. 使 用 async 管道 


处 理 Observable 的 另 一 个 选择 是 使 用 async 管道 。 它 是 上 节 所 
述 的 订阅 过 程 在 条 件 受 限 情况 下 的 简易 实现 方式 。 利 用 这 一 注释 ， 
能 把 从 服务 获取 的 Observable 直接 赋 给 组 件 的 属性 。 在 *ngFor 内 使 
用 async 管道 来 告知 Angular 它 所 处 理 的 属性 是 通过 异步 方式 获取 
的 。 代 码 清单 3-21 展示 了 为 使 用 async 管道 而 修改 过 的 组 件 代 码 。 


代码 清单 3-21: 为 使 用 async 管道 而 更 新 后 的 AthleteListComponent 代码 


import { Component, Output, EventEmitter, OnInit } from 
'@angular/core'; 

import { AthleteService } from './athlete.service'; 
import { Athlete } from "./athlete"; 

import { Observable } from "rxjs/Observable"; 


@Component ({ 
selector: 'app-athlete-list', 
template: 
<ol> 
<li *ngFor="let athlete of athletes | async"> 
<app-athlete (click)="select (athlete)" [athlete]= 
"athlete"> 
</app-athlete></1i> 
</o1> 
、 了 
} 
export class AthleteListComponent implements OnInit { 
athletes: Observable<Athlete[]>; 
Qoutput () selected = new EventEmitter<Athlete>(); 
constructor (private athleteService: AthleteService){ } 


getAthletes() { 
this .athletes = this.athleteService.getAthletes(); 
} 


ngonInit () {this.getAthletes ();} 


select (selectedAthlete: Athlete) { 
this.selected.emit (selectedAthlete); 
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注意 athletes 属性 现在 已 经 从 Athlete 对 象 的 数组 变 为 运动 员 信 
息 数 组 的 Observable。 


注意 

之 所 以 使 用 “管道 ”这 个 术语 ， 是 因为 它 是 通过 “|” 字 符 所 
识别 的 ， 同 时 也 因为 它 是 边界 属性 显示 到 屏幕 上 之 前 对 其 进行 处 
理 的 一 个 函数 。 如 果 你 熟悉 AngularJS 1, 那么 管道 也 可 以 理解 为 
是 过 滤器 的 另 一 个 名 称 。async 是 可 用 管道 中 的 一 种 ， 还 存在 其 他 
管道 ， 比 如 date 管道 将 Date 对 象 呈 现 为 一 个 字符 串 ， 
uppercase/lowercase 管道 将 字符 囊 中 的 字符 转换 为 大 写 或 小 写 形式 
等 。 开 发 者 也 可 以 根据 需要 方便 地 创建 自 定义 管道 。 


3. 使 用 承诺 


如 果 开 发 者 习惯 于 使 用 承诺 (promise), 就 如 同 在 AngularJS 1 里 的 
做 法 一 样 ,那么 在 Angular 中 仍然 可 以 继续 这 么 使 用 。 但 是 由 于 Angular 
默认 使 用 Observable， 开 发 者 需要 利用 Observable 的 toPromise 方法 
将 其 转换 为 承诺 ， 并 将 其 返回 给 组 件 。 


getAthletes(){ 
return this.http.get ('api/athletes.json') 
.map((r: Response)=><Athlete[]>r.json() .data) 
.toPromise(); 


} 
然后 ， 与 AngularJS 1 的 处 理 方法 一 样 ， 可 使 用 then() 方 法 来 处 
理 承 诺 。 代 码 清单 3-22 展示 了 这 种 方式 。 
代码 清单 3-22: 处 理 承诺 的 组 件 


import { Component, Output, EventEmitter, OnInit } from 
'@angular/core'; 

import { AthleteService } from './athlete.service'; 
import { Athlete } from "./athlete"; 

import { Observable } from "rxjs/Observable"; 
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@Component ({ 
selector: 'app-athlete-list', 
template: “ 
<ol> 
<li *ngFor="let athlete of athletes"> 
<app-athlete (click)="select (athlete)" [athlete]="athlete"> 
</app-athlete></1i> 
</ol1> 
3 下 
export class AthleteListComponent implements OnInit { 
athletes: Athlete[]: 
Goutput () selected = new EventEmitter<Athlete>(); 
constructor (Private athleteService: AthleteService){ } 


getRthletes () { 
this .athleteService.getaAthletes () 
.then(list => this.athletes=1list) 
} 


ngonInit () {this.getAthletes ();} 


select (selectedAthlete: Athlete)f{ 
this.selected.emit (selectedAthlete); 
} 
} 


既然 async 管道 可 配合 Observable 和 承诺 一 同 使 用 ， 开 发 者 也 
可 以 利用 它 来 取代 代码 中 对 承诺 的 处 理 。 

到 目前 为 止 ， 有 以 下 4 种 可 选 的 方法 来 处 理 Observable: 

e@ 使 用 Observable 并 使 用 代码 订阅 其 变动 。 

e@ 使 用 Observable 并 使 用 async 管道 。 

e 使 用 承诺 并 在 代码 中 处 理 它 。 

e 使 用 承诺 并 结合 async 管道 。 


JavaScript 的 反射 扩展 (RxJS) 


反射 扩展 是 基于 Observable 模式 的 、 用 于 异步 与 面向 事件 的 程 
序 设计 的 库 集合 。 这 一 项 目 是 由 微软 开发 的 ， 不 仅 支持 JavaScript， 
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还 支持 NET、Java、Node、Swift 等 其 他 许多 语言 。 

一 般 情 况 下 , 异步 程序 设计 是 利用 回调 、 函 数 与 承诺 来 实现 的 。 
它们 适用 于 简单 场景 ， 但 当 复杂 度 增 加 时 ， 例 如 程序 中 具有 撤回 、 
同步 甚至 错误 处 理 过 程 ， 利 用 它们 则 很 容易 出 错 。 利 用 Observable 
对 象 以 及 其 方法 使 得 这 些 情形 更 易于 处 理 。 

RxJS 不 是 由 Angular 开发 团队 开发 的 ,但 它 在 整个 框架 过 程 中 
得 到 广泛 应 用 。 

你 可 通过 网 站 http://reactivex.io/ 了 解 关 于 RxJS 的 更 多 信息 。 


除了 本 章 介 绍 的 概念 , 其 实 还 有 其 他 很 多 关于 Angular 的 内 容 : 
直接 在 视图 中 格式 化 属性 值 的 管道 ， 便 于 在 应 用 程序 的 视图 与 组 件 
间 导 航 的 路 径 ， 简 化 表单 编辑 与 验证 的 模块 等 。 这 些 内 容 很 多 ， 即 
便 使 用 两 倍 于 本 书 厚度 的 书籍 来 记载 它们 ， 友 怕 都 不 够 。 


3.11 ”Angular 与 ASP.NET MVC 的 结合 应 用 


将 Angular 与 ASPNET Core 以 及 ASPNETMVC Core 结合 起 来 
应 用 并 不 比 连接 一 个 静态 JSON 文件 更 复杂 。 在 客户 端 上 ， 所 要 做 
的 仅 是 将 URL 改 为 一 个 ASPNET MVC Core Web API。 建立 服务 器 
端的 服务 部 分 也 很 容易 。 开 发 者 仅 需 要 创建 一 个 控制 器 ， 用 于 返回 
Angular 组 件 所 要 展示 的 项 目 列表 。 
代码 清单 3-23 展示 了 一 个 非常 简单 的 APL 它 响应 URL/api/ 
athletes 并 返回 具有 名 称 与 时 间 的 对 象 列 表 。 在 真实 世界 中 ， 这 些 数 
据 很 可 能 来 源 于 数据 库 或 者 其 他 存储 介质 。 第 9 章 将 展示 一 个 使 用 
数据 库 的 完整 示例 。 
代码 清单 3-23: 运动 员 信息 控制 器 


using System.Collections.Generic; 
using Microsoft.AspNetCore.Mvc; 
using API.Models; 
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using Newtonsoft .Json7 


namespace API.Controllers 


{ 


[Route ("api/[controller]")] 
public class AthletesController : Controller 


{ 


// GET: api/values 

[HttpGet] 

public AthletesViewModel Get() 

{ 

return new AthletesViewModel (new[] { 

new Athlete("Jan Frodeno", "DEU", "08:06:30"), 
new Athlete ("Sebastian Kienle", "DEU", "08:10:02"), 
new Athlete ("Patrick Lange", "DEU", "08:11:14"), 
new Athlete ("Ben Hoffman", "USA", "08:13:00"), 
new Athlete ("Andi Boecherer", "DEU", "08:13:25") 


public class AthletesViewModel 


{ 


public AthletesViewModel (IEnumerable<Athlete> items) 
{ 
Items = items; 
} 
[JsonProperty (PropertyName = "data")] 
public IEnumerable<Athlete> Items { get; set; } 


public class Athlete 


{ 


public Athlete (string name, string country, string time) 


{ 


Name = name; 
Country = country; 
Time = time; 


} 

public string Name { get; set; } 
public string Country { get; set; } 
public string Time { get; set; } 
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默认 情况 下 , 可 通过 使 用 camelCase 将 .NET 属性 的 名 称 转换 为 
JavaScript 属性 (因此 Name 将 变 成 为 JavaScript 属性 name)， 但 如 有 
必要 ， 也 可 通过 使 用 JsonProperty 特性 并 指定 PropertyName 来 改变 
该 名 称 。 
合并 Angular 项 目 与 ASPNET Core 项目 

在 开发 过 程 中 , 将 Angular 项 目 与 ASPNET Core 项 目 集成 在 一 
起 有 些 复杂 。 

有 三 种 可 能 的 方法 : 

e 不 集成 它们 。 在 独立 的 文件 夹 内 使 用 Angular CLI 工具 建立 

Angular 项 目 ， 同 时 仅 把 ASP.NET Core 项 目 与 API 服务 放 
在 一 起 。 这 两 个 项 目 之 间 仅 通过 URL 连接 起 来 。 

e 将 它们 放置 于 一 个 项 目 里 ， 利 用 Angular CLI 工具 来 管理 
Angular 那 一 部 分 ， 同 时 在 ASP.NET Core 项 目的 wwwroot 
文件 夹 内 生成 工件 (artifact)。 

e@ 利用 ASP.NET Core 中 名 为 JavaScriptServices 的 新 特性 ， 在 
不 使 用 Angular CLI 的 情况 下 生成 整个 项 目 。 

下 面 进一步 细致 地 探索 这 三 种 可 选 方案 。 


如 何 利用 webpack 为 浏览 器 生成 Angular 应 用 程序 

为 了 搞 懂 为 何 无 法 在 ASPNET Core 项 目 中 随意 放 入 某 个 
JavaScript 库 而 使 其 正常 运行 ,你 首先 要 理解 Angular 项 目 是 如 何 建 
立 的 。 

你 可 能 已 经 注意 到 ，Angular 是 一 个 模块 化 框架 。 无 论 是 开发 
者 自主 开发 的 还 是 由 框架 提供 的 ， 应 用 程序 中 的 每 个 不 同 部 件 都 分 
布 在 独立 的 文件 或 模块 里 ， 并 且 必 须 按 需 导入 。 样 式 是 散布 于 多 个 
文件 中 的 ， 并 有 可 能 与 组 件 一 一 对 应 。 所 有 这 些 文件 都 需要 被 绑 定 
到 一 起 ， 从 而 避免 向 浏览 器 发 送 成 百 上 千 的 文件 。 此 外 ，Angular 
应 用 程序 是 利用 TypeScript 开发 的 ， 它 在 被 浏览 器 处 理 之 前 需要 转 
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化 为 标准 的 ES5 JavaScript。 

发 握 多 样 化 的 部 件 间 的 依赖 与 关系 、 将 JavaScript 转换 至 
TypeScript、 绑 定 JavaScript 与 CSS 并 最 终 在 HTML 文件 中 包含 正 
确 的 引用 ， 这 些 是 运行 Angular 应 用 程序 前 所 必须 执行 的 步骤 。 这 
个 复杂 的 任务 令 人 生发 。 

上 述 过 程 本 可 以 通过 使 用 诸如 gulp 的 通用 前 端 构建 工具 来 完 
成 ， 但 是 Angular 开发 团队 决定 使 用 一 个 名 为 webpack、 专 注 于 模 
块 绑 定 的 构建 工具 来 完成 所 有 任务 。 同 时 ，Angular CLI 工具 也 正 是 
利用 它 ， 从 而 在 开发 过 程 中 执行 Angular 项 目 并 在 发 布 应 用 程序 时 
生成 工件 。 


1. 将 Angular 与 ASP.NET Core 作为 两 个 独立 项 目 


第 一 种 同时 也 是 最 简单 的 实现 集成 的 方案 就 是 不 集成 ,一 方面 我 
们 有 一 个 简单 的 ASPNET Core Web API 可 以 返回 运动 员 列 表 (如 代码 
清单 3-23 所 示 )， 另 一 方面 我 们 有 贯穿 本 章 使 用 的 示例 Angular 应 用 
程序 。 对 前 者 使 用 Visual Studio， 而 对 后 者 使 用 Angular CLI 工具 的 
ng serve 指令 ， 便 能 同时 启动 这 两 个 项 目 。 

唯一 不 同 之 处 是 对 于 代码 清单 3-20 中 所 示 的 服务 类 , 在 http.get 
方法 中 所 使 用 的 URL 需要 被 更 改 为 http.get('http://localhost:57663/api/ 
athletes)( 利 用 Visual Studio 启动 项 目 时 所 使 用 的 任意 端口 号 )。 

然而 ， 这 种 做 法 存在 一 个 问题 。 在 某 一 个 域 上 执行 的 应 用 程序 
(Angular 应 用 程序 在 localhost:4200 上 执行 ) 正 在 尝试 访问 来 自 另 一 
个 域 的 API(localhost:57663)。 这 违反 了 由 浏览 器 实现 的 用 于 屏蔽 跨 
源 ( 具 有 不 同 域 、 子 域 、 端 口 或 者 模式 的 URL) 资 源 访问 脚本 的 同 源 
原则 。 

第 一 种 处 理 方法 是 在 Angular 开发 服务 器 的 配置 中 配置 一 个 代 
理 (参见 代码 清单 3-24)。 这 样 ， 脚 本 将 与 同一 个 源 进行 通信 ， 通 过 
代理 实现 对 真实 API 的 请 求 。 
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代码 清单 3-24: 代理 配置 (proxy.config.json) 


{ 


"papi 
"target": "http://localhost:57663", 
"secure": false 


} 
} 


至 此 , 服务 所 使 用 的 URL 必须 处 于 相同 的 域 , 所 以 需要 将 其 变 
更 为 http.get(/api/athletes')。 
最 后 ， 重 启 Angular 开发 服务 器 并 具体 指定 其 配置 : 


ng serve --proxy-config proxy.config.json 


这 种 做 法 适用 于 开发 阶段 ， 但 不 足以 作为 一 个 长 久 的 解决 方 
案 ， 还 需要 对 ASPNET Core 应 用 程序 进行 配置 ， 以 允许 CORS 
(Cross-Origin Resource Sharing， 跨 源 资 源 共 享 ) 的 请 求 。 首 先 ， 在 项 
目 中 引用 Microsoft.AspNetCore.Cors 包 。 接 着 ， 在 Startup 类 的 
Configure 方法 中 对 原则 进行 配置 。 


app.UseCors (builder => { 
builder.WithOrigins ("http://localhost:4200"); 


}); 

为 进行 测试 , 在 不 使 用 代理 配置 的 情况 下 重启 Angular 开发 服 
务 器 。 

2. 利用 Angular CL| 将 Angular 与 ASP.NET Core 合并 为 同一 
项 目 


上 一 方案 需要 执行 较 少 的 设置 并 将 两 个 项 目 完全 分 离 。 假 如 前 
端 纯粹 是 Angular 并 且 与 后 端 相 解 厢 ， 那 么 它 可 能 是 最 佳 方案 。 然 
而 ， 如 果 应 用 程序 是 服务 器 端 呈现 与 Angular 代码 的 混合 体 ， 那 么 
这 两 部 分 需要 位 于 同一 个 项 目 中 。 

此 方法 背后 的 大 致 理 念 是 在 同一 个 文件 夹 下 创建 这 两 个 项 目 ， 
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一 个 使 用 Visual Studio， 另 一 个 使 用 Angular CLI 工具 。 接 着 ， 配 置 
CLI 工具 ， 将 生成 的 工件 放 在 ASPNET Core 项 目的 wwwroot 文件 
夹 下 。 

首先 ， 创 建 一 个 标准 的 ASPNET Core MVC 应 用 程序 ， 并 添加 
一 个 Web API 服务 (该 Web API 服务 来 自 代 码 清单 3-23)。 

接着 ， 使 用 CLI 工具 创建 一 个 Angular 项 目 ， 并 将 其 复制 到 相 
同 的 文件 夹 下, 从 而 使 Angular 项 目 中 的 package.json 文件 与 该 项 目 
中 的 .csproj 文件 位 于 同一 文件 夹 下 。 图 3-5 展示 了 复制 项 目 后 所 形 
成 的 项 目 树 状 图 。 


鲁 部 - 四 -气量 轩 


Search Solution Explorer (Ctrl 间 


园 Solution ‘Angular (1 project) 


全 Connected Services 
"a Dependencies 
££ Properties 
罗 wwwroot 
别 Controllers 
| dist 
曾 e2e 
疗 Models 
司 src 
》 是 app 
b massets 
b 颗 environments 
园 favicon.ico 
中 indechtml 
Ts maints 
Ts polyfillsts 
国 sbyles.css 
TS testts 
§ tsconfigjson 
b 面 Views 
口 .editorconfig 
口 ,gitignore 
© angular-clijson 
b © appsettingsjson 
b HT bowerjson 
© bundleconfigjson 


Mvvvvvvro 


OT karma.confjs 
FT packagejson 

b cs program.cs 
DT protractor.confjs 
国 README.md 

b ce Startup.cs 
EE 


3-5 ”Angular 与 ASPNET Core 位 于 同一 项 目 
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下 一 步 需 要 修改 angular-clijson 文件 ， 从 而 使 所 生成 的 输出 被 
放 入 wwwroot 文件 夹 而 不 是 默认 的 dist 文件 夹 。 由 于 生成 过 程 会 清 
室 输 出 文件 夹 的 内 容 ， 开 发 者 需要 确认 输出 已 被 置 于 子 文件 夹 ， 从 
而 避免 误 删 文件 夹 中 已 经 存在 的 文件 。 


"apps": [ 
长 
下 
"outDir": "wwwroot/js", 
"assets": [ 
"assets", 


"favicon.ico" 


1 


接着 运行 ng build 指令 , Angular CLI 将 在 wwwrootiis 文件 夹 内 
创建 一 个 可 发 布 版 本 的 脚本 。 

最 后 一 步 是 在 需要 出 现 Angular 应 用 程序 的 地 方 (例如 在 
Home/Index.cshtml 视图 中 ) 插 入 <app-root> 标 记 ， 并 按照 下 列 方式 引 
用 在 文件 Layout.cshtml 中 生成 的 文件 : 


<script type="text/javascript" src="~/js/inline. 
bundle.js"></script> 

<script type="text/javascript" src="~/js/styles. 
bundle.js"></script> 

<script type="text/javascript" src="~/js/vendor. 
bundle.js"></script> 

<script type="text/javascript" src="~/js/main. 
bundle.js"></script> 


图 3-6 展示 了 默认 的 ASPNET Core 模板 的 主页 , 并 显示 了 来 源 
于 Web API 列表 的 Angular 应 用 程序 。 
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园 国 5 wm 


€ > O | amr 


ASP.NET Core Windows Linux OSX 


图 3-6 混合 的 服务 器 端 与 Angular 呈现 


为 了 使 开发 更 简便 ， 可 以 配置 Angular CLI 令 其 在 任 一 文件 发 
生变 化 时 执行 生成 过 程 ， 从 而 利用 Angular 开发 服务 器 来 实现 开发 
者 可 能 惯用 的 快速 反馈 过 程 : ng build --watch。 浏 览 器 并 不 会 自动 
刷新 ， 但 文件 每 次 发 生变 化 时 ， 脚 本 至 少 是 重新 创建 的 。 

这 种 合并 Angular 项 目 与 ASPNET Core 项 目的 方法 的 设置 过 程 
较为 繁杂 ， 但 该 过 程 仅 需 要 在 项 目 建立 之 初 完成 。 如 果 开 发 者 需要 
一 个 更 快捷 、 更 少 人 为 操作 甚至 更 深 程 度 的 集成 ， 那 么 还 有 第 三 种 
可 选 方案 : 使 用 JavaScriptServices。 


3. 使 用 JavaScriptServices 


最 终 方案 使 用 了 JavaScriptServices， 它 是 微软 在 ASPNET Core 
V2 中 发 行 的 一 个 库 。 该 库 的 目的 在 于 简化 利用 ASPNET Core 进行 
单 页 面 应 用 程序 开发 的 过 程 , 除 提供 了 一 种 简单 的 项 目 设置 方式 外 ， 
它 还 添加 了 诸如 Angular 应 用 程序 的 服务 器 端 呈 现 等 特性 ， 并 且 集 
成 了 webpack 生成 过 程 ， 实 现 了 对 Angular CLI 的 解 厢 。 所 有 这 些 
都 归功 于 一 个 允许 在 ASPNET Core 内 执行 任意 Node.js 应 用 程序 的 
底层 库 。 它 不 仅 支 持 Angular， 还 支持 React。 
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在 Visual Studio 2017 中 ， 通 过 选择 Angular 项 目 模板 (如 图 3-7 
所 示 ) 或 者 使 用 dotnet new 命令 并 使 用 Angular 模板 ， 可 以 直接 创建 
利用 JavaScriptServices 的 项 目 。 


New ASP.NET Core Web Applic - WebApplication1 3 pb 
NET Core 
An empty project template for creating an ASPNET 
Ng Core application. This template does not have any 
、 content in it. 
Empty ‘Web API Web Web Angular 
Application 。 Application Laam more 
(Model-View- 
Controller) 
PS 
时 从 
Reactjs Reactjsand 
Change Authentication 
No Authenticatio 
DD Enable Docker Support 
Os: Windows 
Requires Docker for Windows 
Docker support can also be enabled later Learn more 
OK Cancel 


3-7 ”Visual Studio 2017 中 的 Angular 项 目 模板 


所 产生 的 项 目 相 对 于 模板 更 像 是 一 个 样 例 ， 但 它 为 利用 
ASPNET Core 开发 单 页 面 应 用 程序 提供 了 一 个 良好 的 起 点 。 

添加 本 书 到 目前 为 止 所 使 用 的 示例 应 用 程序 ， 还 需要 做 一 些 
工作 。 

首先 , 将 包含 了 根 应 用 程序 组 件 的 所 有 组 件 复制 到 ClientApp/ 
app/components/athletes 文件 夹 。 由 于 该 应 用 程序 已 经 存在 了 一 个 
根 应 用 程序 组 件 ， 需 要 将 原来 的 根 应 用 程序 组 件 更 名 为 athletes- 
app.componentts。 图 3-8 展示 了 ClientApp 文件 夹 的 内 容 。 

为 令 应 用 程序 可 以 使 用 它们 ， 需 要 在 位 于 ClientApp/app/ 
app.module.shared.ts( 见 代码 清单 3-25) 的 应 用 程序 根 模块 中 引用 
它们 。 
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4 局 ClientApp 
4 局 app 
4 B® components 
>》 闻 app 
4 athletes 
TS athlete.componentts 
TS athlete.service.ts 
Ts athlete.ts 
| athlete-list.component.html 
TS athlete-listcomponentts 
0 athletes-app.component.html 
Ts athletes-app.component.ts 
bp 别 counter 
b 别 fetchdata 
上 别 home 
》 是 navmenu 
TS app.module.browser.ts 
TS app.module.serverts 
TS app.module.shared.ts 


图 3-8 ClientApp 文件 夹 的 内 容 


代码 清单 3-25: 应 用 程序 根 模块 


import NgModule } from '@angular/core'; 
import CommonModule } from '@angular/common'; 
import FormsModule } from '@angular/forms'; 
import HttpModule } from '@angular/http'; 
import RouterModule } from '@angular/router'; 


import { AppComponent } from './components/app/ 
app.component'; 

import NavMenuComponent } from './components/ 
navmenu/navmenu.component'; 

import HomeComponent } from './components/ 
home/home.component'; 

import FetchDataComponent } from './components/ 
fetchdata/fetchdata.component'; 

import CounterComponent } from './components/ 


counter/counter.component'; 


import { AthletesAppComponent } from './components/ 
athletes/athletes-app.component'; 

import { AthleteService } from './components/ 
athletes/athlete.service'; 
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import { AthleteListComponent } from './components/ 
athletes/athlete-list.component'; 

import { AthleteComponent } from './components/ 
athletes/athlete.component'; 


@NgModule ({ 
declarations: [ 
AppComponent, 
NavMenuComponent, 
CounterComponent, 
FetchDataComponent, 
AthletesAppComponent, 
AthleteListComponent, 
AthleteComponent, 
HomeComponent 
]， 
providers: [AthleteServicel], 
imports: [ 
CommonModule, 
HttpModule, 
FormsModule, 
RouterModule .forRoot ([ 
{ path: '', redirectTo: 'home', pathMatch: 'full' }, 
{ path: 'home', component: HomeComponent }, 
{ path: 'counter', component: CounterComponent }, 
{path: 'fetch-data', component: FetchDataComponent }, 
{path: 'athletes', component: AthletesAppComponent }, 
{ path: '**', redirectTo: 'home' } 


于 
export class AppModuleShared { 


} 


除了 导入 语句 、 声 明 以 及 利用 新 组 件 与 服务 配置 的 providers 数 
组 之 外 ， 还 有 一 个 新 内 容 : 路 径 配 置 。 在 Angular 中 ， 路 径 用 于 在 
URL 与 特定 组 件 间 建立 映射 ， 并且 使 组 件 间 的 导航 更 简单 。 归 功 于 
这 些 路 径 ， 用 户 能 够 直接 对 应 用 程序 的 某 一 部 分 进行 书签 标记 或 导 
航 ， 就 像 它 是 一 个 服务 器 端 呈现 的 页 面 一 样 。 
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4. 集成 方法 的 选择 


我 们 已 经 讨论 了 三 种 在 ASPNET Core 应 用 程序 中 集成 Angular 

项 目的 方法 。 如 果 前 端 与 API 具有 清晰 的 界线 ， 那 么 将 Angular 与 
ASPNET Core 分 为 两 个 独立 项 目 是 最 佳 方案 , 这 也 允许 开发 者 利用 
Angular 工具 清晰 地 进行 开发 。 利 用 Angular CLI 将 Angular 与 
ASPNET Core 合并 至 一 个 项 目 , 适用 于 在 一 个 Visual Studio 项 目 中 
对 整个 应 用 程序 进行 管理 的 同时 仍旧 使 用 Angular 工具 进行 开发 ， 
但 这 个 方法 需要 更 多 的 人 工 操 作 。 如 果 想 要 将 传统 ASPNET 的 开发 

与 SPA 相 结合 ,那么 使 用 JavaScriptServices 可 能 是 最 佳 方案 。 它 也 
提供 了 绝 大 多 数 复杂 应 用 程序 为 了 简化 开发 所 需 的 特性 ， es 
器 端 预 呈现 以 及 组 件 的 热 交换 。 但 世界 是 瞬息 万 变 的 ， 每 天 都 会 
现 出 新 方案 。 


3.12 Visual Studio 2017 对 Angular 的 支持 


至 此 , 我 们 已 经 编写 了 许多 代码 。 其 实 , 使 用 Angular 在 Visual 
Studio 内 的 本 地 集成 可 以 为 开发 者 节省 很 多 不 必要 的 代码 输入 。 
Visual Studio 2017 有 三 方面 有 助 于 编写 Angular 应 用 程序 的 特性 。 

e 辅助 编写 Angular 元 素 的 代码 片段 

e@ TypeScript 文件 内 的 智能 提示 

e HTML 文件 内 的 智能 提示 

下 面 将 逐一 对 其 进行 详细 介绍 。 


3.12.1 代码 片段 

Visual Studio 自 带 了 对 TypeScript 的 本 地 支持 ， 因 此 ， 在 创 
建 任意 新 的 TypeScript 文件 时 ， 包 括 与 Angular 相关 的 文件 ， 开 
发 者 可 使 用 “Add New Item( 添 加 新 项 目 )” 并 选择 TypeScriptFile， 
如 图 3-9 所 示 。 
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Add New lem -155 
2 nstaled Sortby: Default EE 二 旺 | Search Installed Templates (CH 日 a 户 ~ 
es 加 wc vewsanpoge meromn “国信 这 
ee crc. Pm 
+ we 


ASPNET , 
spn i 区 
Scripts . 
see 下 Ce 
b Online sotp anss AspNET Core 
4 sspner contgumionFie ASPNET Core 
加 mane Aaron 
上 esonpe ASPNET Core 
加 wo nner ore 


国 we<copeusxne ASPNET Core 
© wwsoncmonamrr sper co 
© soe ortowion rie sspner co 
[= ~ ~ maen 了 


3-9 Add New ltem 对 话 框 


一 旦 创建 了 一 个 空 的 TypeScript 文件 ， 开 发 者 就 可 以 使 用 
Angular 代码 片段 来 生成 组 件 、 模 块 、 服 务 以 及 其 他 Angular 元 素 的 
程序 构架 。 

例如 ，ng2component 代码 片段 将 扩展 为 下 列 代码 ; 


import { Component } from "angular/core'7 


@Component ({ 
selector: 'my-component', 
template: 'Hello my name is {{name}}."' 
}) 
export class ExampleComponent { 
constructor() { 
this.name = 'Sam'; 
} 
} 


代码 片段 也 可 以 扩展 为 其 他 常见 的 代码 块 ， 例 如 HTTP 连接 
(ng2httpget) 。 
return this.http.get ('url') 


-map ( (esponse: Response) => response.json()); 
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或 者 订阅 Observable(ng2subscribe)。 


this.service.function 
.Subscribe (arg => this.property = arg); 


吹 


止 
吕 
Angular2 的 代码 片段 包 并 不 属于 Visual Studio 默认 安装 的 一 部 分 , 需 


要 单独 从 Visual Studio 扩展 程序 库 中 下 载 : https://marketplace.visualstudio. 
com/items?itemName=MadsKristensen.Angular2SnippetPack. 


3.12.2 TypeScript 文件 中 的 智能 提示 

通过 直接 从 TypeScript 的 typings(TypeScript 文件 的 说 明文 档 ) 
获取 针对 Angular 的 说 明文 档 ，Visual Studio 2017 也 提供 了 针对 
Angular 的 完整 性 (或 是 相关 性 ) 智 能 提示 。 

图 3-10 展示 了 在 @Component 注解 内 输入 内 容 时 所 出 现 的 自动 
补 全 列表 。 注意 该 列表 中 仅 包含 被 module 类 公开 的 方法 , 同时 提供 
了 这 些 函 数 的 完整 说 明 。 


ements, 
or: ‘app-athlete 
ee “{{athlete 2 ({{athlete. country}}): 《fathlete.time}}， 


objects that are visible to a Directive and its light DOM 
children, 


(property) Directive providers: (any{] | TypeProvider | ValueProvider | ClassProvider | EistingProvider | FactoryProvide)[] 
Defines the set of injectable 


#4 Simple Pample 
£ templateur ~ 
Here is an eample of a class that can be injected: 


图 3-10 ”自动 补 全 智能 提示 
当 开 发 者 打算 输入 参数 时 ， 便 会 出 现 常用 的 参数 信息 提示 工 


有 具 ， 如 图 3-11 所 示 。 
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日 ,getAthletes(){ 
return this.http.get('/api/athletes' ,|) 
“map((r: Response)= get(urk: string, [options?: RequestOptionsArgs]): Observable<Response> 
“topromise(); Performs a request with "get http method. 


} 


[} 


图 3-11 参数 信息 


3.12.3 ”HTML 文件 中 的 智能 提示 

Angular 的 优势 依托 于 其 通过 应 用 于 HTML 元 素 的 指令 而 实现 
的 声明 方法 。 附 带 了 代码 片段 包 的 Visual Studio 2017 在 这 一 情况 下 
也 能 发 挥 其 作用 。 连 同 标准 的 HTML 特性 ，Visual Studio 的 智能 提 
示 也 为 所 有 Angular 结构 指令 提供 了 自动 补 全 功能 ,如 图 3-12 所 示 ， 
它 首先 显示 ng2 标识 ， 接 着 展开 Angular 的 指令 列表 ， 然 后 展开 某 
指令 的 完整 格式 。 


日 <ol> 
日 <li ng> 


@ lang elect(athlete)” 
i 二 
[0 ES 


日 <ol> 
2 已 <li ng2-> 


ee so er) select athlete)” 
5 | </1i ng2-nglf 
6 


</ol> 
athlete-list.component.ts* 


1 日 <ol> 

2 i9 r="let 国 国 of 1ist> 

3 <app-athlete (click)="select(athlete)” 
4 </app-athlete> 

5 </li> 

6 [cvol> 


3-12 HTML 中 的 Angular 自动 补 全 
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3.13 “本章 小 结 


Angular 的 应 用 程序 独立 于 任意 特定 的 服务 器 端 技术 ， 但 最 新 
版 本 的 Visual Studio 以 及 ASPNET Core 所 提供 的 功能 特征 使 其 极其 
适用 于 在 Microsoft.NET 平台 上 开展 前 端 开 发 。Angular 是 一 个 功能 
强大 的 JavaScript 框架 ， 具 备 很 多 概念 。 本 章 仅 是 一 个 简介 ， 但 笔 
者 希望 你 能 掌握 其 中 的 要 点 ， 从 而 开始 迈 向 更 前 沿 的 主题 并 自主 地 
进行 探索 。 
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Bootstrap 入 门 


本 章 主要 内 容 : 

e@ Bootstrap 简介 

e@ 使 用 Bootstrap 构建 自 适 应 式 网 站 

e 使 用 Less 定制 Bootstrap 

e@ 可 简化 Bootstrap 开发 的 Visual Studio 2017 特性 


前 文中 已 经 学 习 了 如 何 将 客户 端 行为 添加 到 Web 应 用 程序 中 ， 
本 章 将 介绍 如 何 通过 引入 Bootstrap， 美 化 Web 应 用 程序 的 外 观 。 

直到 几 年 前 ， 在 网 站 上 使 用 样式 对 开发 者 而 言 ， 还 是 一 种 “ 必 
要 之 恶 (necessary evil)”。CSS 并 不 完全 是 一 种 编程 语言 ， 并 没有 考 
虑 到 可 维护 性 。 设 计 网 站 对 于 网 页 设计 师 来 说 是 一 场 走 梦 ， 网 页 设 
计 师 每 天 都 在 使 用 CSS， 并 且 不 得 不 在 每 个 新 项 目 中 重复 他 们 的 工 
作 。 这 导致 数 百 个 微 库 的 创建 ， 其 目的 是 减少 基本 和 标准 CSS 定义 
中 的 重复 (或 复制 粘贴 操作 )。 
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幸运 的 是 ， 一 家 Twitter 公司 决定 将 其 内 部 “蓝图 ”发 布 为 一 个 
名 为 Bootstrap 的 开源 项 目 。 该 项 目 很 快 就 成 为 最 受 欢迎 的 CSS 
“ 库 ” 因为 它 拥 有 优秀 的 默认 样式 和 组 件 、 高 度 模块 化 ,并且 易 于 
通过 CSS 预 处 理 语言 Less( 最 近 也 包括 Sass) 定 制 。Bootstrap 默认 情 
况 下 具有 自 适 应 能 力 , 这 意味 着 使 用 它 创建 的 网 站 和 Web 应 用 能 
自动 适应 设备 的 屏幕 大 小 ， 无 论 设备 是 电视 屏幕 、 台 式 机 、 笔 记 本 
电脑 、 平 板 电 脑 还 是 智能 手机 。Visual Studio 2017 中 对 该 框架 提供 
了 良好 支持 ， 令 使 用 它 更 为 快捷 和 令 人 愉悦 。 

本 章 首 先 介绍 Bootstrap， 讨 论 它 的 一 些 特 性 ， 然 后 将 进一步 介 
绍 如 何 将 它 与 ASP.NET Core 和 Visual Studio 2017 结合 使 用 。 


本 章 代码 下 载 
本 章 的 相关 代码 可 通过 网 站 www.wrox.com 下 载 。 搜 索 该 书 的 
ISBN(978-1-119-18131-6)， 可 在 第 4 章 的 下 载 部 分 找到 对 应 代码 。 


4.1 Bootstrap 简介 


Bootstrap 是 一 个 非常 简单 的 框架 。 只 需要 安装 它 (通过 Bower、 
通过 下 载 或 从 CDN 引用 它 )， 将 样式 添加 到 页 面 中 ， 此 后 会 “神奇 ” 
地 获得 更 专业 的 整体 风格 。 


安 壮 


4.1.1 安 效 Bootstrap 
必须 引用 三 个 文件 (以 及 第 四 个 可 选 文件 ) 才 能 使 Bootstrap 的 全 
部 特性 生效 : 
e@ Bootstrap CSS 文件 : <link href="bootstrap/css/bootstrap. min.css" 
rel="stylesheet">。 
e@ 可 选 的 Bootstrap 主题 : <link href="bootstrap/css/bootstrap- theme. 
min.css" rel="stylesheet"> 可 为 页 面 添 加 一 些 美观 的 颜色 。 
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e@ Bootstrap JavaScript 库 : <script src ="bootstrap/js/bootstrap.min. 
Js"></script>。 
由 于 Bootstrap 基于 它 ，jQuery 也 是 必需 的 。 
如 果 需 要 支持 较 早 GE9 之 前 ) 版 本 的 正 ， 则 必须 添加 填 际 (shim) 
库 html5shiv 和 Respond.js。 官 方 文档 中 建议 的 基本 模板 如 代码 清单 
4-1 所 示 。 
代码 清单 4-1: 基本 模板 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 


<meta name="viewport" content="width=device-width, 
initial-scale=1"> 
<!-- The above 3 meta tags *must* come first in the head; 


any other head content must come *after* these tags --> 
<title>Basic template</title> 


<!-- Bootstrap --> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
<link href="css/bootstrap-theme.min.css" rel="stylesheet"> 


<!-- HTML5 shim and Respond.js for IE8 support of HTML5 
elements and media queries --> 
<!-- WARNING: Respond.js doesn't work if you view the page 
Via ELLs ,==% 
<1=={[i£ lt IE 9]> 
<script src="https://oss.maxcdn .com/htm15shiv/3.7.2/ 
html5shiv.min.js"></script> 
<script src="https://oss.maxcdn .com/respond/1.4.2/respond. 
min.js"></script> 
去 站 di 于] 一 一 > 
</head> 
<body> 


<hl>Hello, world!</h1> 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/ 
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1.12.4/jquery .min.js"></script> 
<!-- Include all compiled plugins (below), or include 
individual files as needed --> 


<script src="js/bootstrap.min.js"></script> 
</body> 
</html> 


此 处 唯一 的 文本 ， 一 句 简 单 的 “Hello, world!”， 与 未 应 用 样式 
的 页 面 的 区 别 如 图 4-1 所 示 。 
下 x 醒 
€ 人 © | mleWcyuserwyuserpocum 


Hello, world 


Hello, world! 


4-1 应 用 样式 前 后 的 同一 个 页 面 


图 4-1 展示 了 用 于 字体 排 印 (typography， 是 一 种 对 字体 、 字 号 、 
缩 进 、 行 间距 、 字 符 间 距 进行 设计 、 安 排 等 ， 来 进行 排版 的 工艺 ) 
的 Bootstrap 的 核心 CSS 样式 的 一 个 示例 ， 下 面 将 详细 介绍 它 。 

注意 

本 章 使 用 Bootstrap 3.3 版 . Bootstrap 4 版 本 已 开发 了 很 长 时 间 ， 
在 撰写 本 文 时 仍 处 于 beta 版 本 。 该 版 本 发 布 时 ， 预 计 最 大 的 变化 将 
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是 从 Less 转换 到 Sass， 重 写 所 有 JavaScript 插件 以 及 删除 非 自 适 应 
的 布局 。 


4.1.2 ”Bootstrap 的 主要 特性 

Bootstrap 基本 上 由 三 种 不 同类 型 的 特性 组 成 : 

e 核心 CSS 类 : 这 些 样式 类 自动 地 或 通过 应 用 简单 的 CSS 类 
来 增强 元 素 的 风格 。 

e 组 件 : 这 些 组 件 实现 更 复杂 的 UI 元 素 ， 例 如 导航 栏 、 下 拉 
菜单 、 输 入 组 、 进 度 条 等 。 

e JavaScript 插件 : 它们 为 各 种 组 件 赋予 生命 。 

接 下 来 将 详细 介绍 这 些 特 性 。 


4.2 ”Bootstrap 样式 


Bootstrap 提供 的 第 一 个 核心 功能 是 一 组 CSS 类 , 可 增强 网 站 的 
外 观 并 使 其 具有 自 适 应 能 力 。 

这 些 样式 可 以 大 致 分 为 以 下 几 类 :; 
e 网 格 系统 (Grid System) 
e 排版 (Typography) 
e 表格 
e 表单 
e 按钮 


4.2.1 网 格 系统 
网 格 系统 是 任何 CSS 框架 都 具有 的 一 个 基本 特性 , 它 允 许 开发 
者 创建 基于 一 系列 行 和 列 的 页 面 布局 。 在 这 一 基本 行为 的 基础 上 ， 
Bootstrap 提供 了 一 个 能 够 自动 适应 屏幕 尺寸 的 12 列 动 态 网 格 布局 。 
使 用 Bootstrap 网 格 系统 进行 布局 时 ， 需 要 牢记 几 条 说 明 : 
e@ 整个 网 格 必须 位 于 一 个 使 用 .container 标 记 的 HIML 元 素 中 。 
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e@ 该 容器 包含 使 用 <div class="row"> ... </div> 定 义 的 行 。 
e 行 中 包括 列 。 每 列 的 宽度 通过 使 用 类 .col-sm-* 指 定 该 列 跨 
越 的 网 格 单元 格 的 数量 定义 ， 其 中 * 用 实际 宽度 值 替换 。 例 
如 ，4.col-sm-3(4X3=12) 将 用 于 制作 四 个 等 宽 的 列 。 
代码 清单 4-2 展示 了 这 些 基 本 规则 的 实际 应 用 。 其 中 有 四 行 ， 
每 行 有 不 同 的 列 (12X1、8+4、4X3 和 6X2)。 应 用 的 类 是 .col-sm-*， 
该 类 定义 了 “小 设备 ”( 屏 幕 尺寸 大 于 768 像素 ) 和 以 上 尺寸 设备 的 
行为 。 图 4-2 中 展示 了 正常 宽度 下 的 网 格 显 示 方 式 ， 以 及 当 浏 览 器 


4-2 网 格 在 桌面 和 智能 手机 模式 中 的 显示 方式 
代码 清单 4-2: 基本 网 格 


<!DOCTYPE html> 
<html lang="en"> 
<body> 
<div class="container"> 
<div class="row"> 


<div class="col-sm-1">.col-sm-1</div> 
<div class="col-sm-1">.col-sm-1</div> 
<div class="col-sm-1">.col-sm-1</div> 
<div class="col-sm-1">.col-sm-1</div> 
<div class="col-sm-1">.col-sm-1</div> 
<div class="col-sm-1">.col-sm-1</div> 
<div class="col-sm-1">.col-sm-1</div> 
<div class="col-sm-1">.col-sm-1</div> 
<div class="col-sm-1">.col-sm-1</div> 
<div class="col-sm-1">.col-sm-1</div> 
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<div class="col-sm-1">.col-sm-1</div> 
<div class="col-sm-1">.col-sm-1</div> 
</div> 
<div class="row"> 
<div class="col-sm-8">.col-sm-8</div> 
<div class="col-sm-4">.col-sm-4</div> 
</div> 
<div class="row"> 
<div class="col-sm-4">.col-sm-4</div> 
<div class="col-sm-4">.col-sm-4</div> 
<div class="col-sm-4">.col-sm-4</div> 
</div> 
<div class="row"> 
<div class="col-sm-6">.col-sm-6</div> 
<div class="col-sm-6">.col-sm-6</div> 
</div> 
</div> 


</body> 
</html> 
为 更 好 地 理解 这 一 点 ， 下 面 将 说 明 自 适应 网 格 的 工作 原理 。 
Bootstrap 定义 了 4 类 设备 ,每 类 设备 都 有 一 个 不 同 的 CSS 类 前 级 : 
e。 超 小 型 设备 , 如 智能 手机 , 屏幕 尺寸 小 于 768 像素 (.col-xs-)。 
e@ 小 型 设备 ， 如 平板 电脑 ， 屏 幕 尺 寸 大 于 768 像素 但 小 于 992 
像素 (.col-sm-)。 
e 与 普通 笔记 本 电脑 一 样 , 中 型 设备 的 屏幕 尺寸 大 于 992 像素 ， 
但 小 于 1200 像素 (.col-md-)。 
e@ 大 型 设备 ， 如 台式 机 ， 屏 幕 尺 寸 大 于 1200 像素 (.col-lg-)。 
在 代码 清单 4-2 中 ， 列 的 大 小 是 用 类 .col-sm-* 指 定 的 ， 这 意味 
着 小 于 768 像素 的 所 有 单元 都 将 使 用 默认 的 垂直 堆 炙 布局 , 如 图 4-2 
所 示 。 为 让 智能 手机 和 平板 电脑 堆 欠 单 元 ， 但 在 桌面 上 保持 水 平 ， 
应 使 用 类 .col-md- *。 
但 还 可 以 通过 组 合 不 同 的 类 ， 实 现 更 复杂 的 布局 。 例 如 ， 如 果 
不 希望 智能 手机 版 本 水 平 堆 车 ,但 每 行 需要 两 列 ， 则 可 以 使 用 
col-xs-6 col-sm-1 来 定义 此 行为 。 
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男 一 方面 ， 如 果 希 望 所 有 设备 尺寸 的 布局 相同 ， 则 只 需要 将 该 
类 应 用 于 最 小 尺寸 ， 那 么 所 有 较 大 尺寸 都 将 继承 这 一 设置 。 例 如 ， 
如 果 总 是 需要 每 行 两 列 ， 无 论 大 小 如 何 ， 只 需要 应 用 col-xs-6 即 可 。 
此 类 方法 的 一 个 示例 如 代码 清单 4-3 所 示 。 


代码 清单 4-3: 一 个 更 复杂 的 布局 


<!DOCTYPE html> 
<html] lang="en"> 


<body> 

<div class="row"> 
<div c -sm-1">.col-sm-1</div> 
<div c "5" eol"sm 1}</div> 
<div c -sm-1">.col-sm-1</div> 
<div c -sm-1">.col-sm-1</div> 
<div c -sm-1">.col-sm-1</div> 
<div c -sm-1">.col-sm-1</div> 
<div class="col-xs-6 col-sm-1">.col-sm-1</div> 
<div class="col-xs-6 col-sm-1">.col-sm-1</div> 
<div class="col-xs-6 col-sm-1">.col-sm-1</div> 
<div class="col-xs-6 col-sm-1">.col-sm-1</div> 
<div clas col-xs-6 col-sm-1">.col-sm-1</div> 
<div class="col-xs-6 col-sm-1">.col-sm-1</div> 

</div> 

<div class="row"> 
<div class="col-xs-6 col-sm-8">.col-sm-8</div> 
<div class="col-xs-6 col-sm-4">.col-sm-4</div> 


</div> 
<div class="row"> 
<div class="col-xs-6 col-sm-4">.col-sm-4</div> 


<div clas col-xs-6 col-sm-4">.col-sm-4</div> 


<div class="col-xs-6 col-sm-4">.col-sm-4</div> 
</div> 
<div class="row"> 
<div class="col-xs-6">.col-sm-6</div> 
<div class="col-xs-6">.col-sm-6</div> 
</div> 
</body> 
</html> 
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网 格 系统 还 支持 其 他 一 些 有 价值 的 功能 。 例 如 ， 如 果 需 要 为 
行 添 加 边 距 ， 可 指定 偏 移 量 ;可 在 行内 嵌 套 列 ; 还 可 更 改 列 的 显 
示 顺 序 。 

对 于 列 在 水 平 布 局 中 的 顺序 与 牌 直 堆 苹 布局 中 的 顺序 不 同 的 
情况 ， 最 后 一 个 特性 非常 重要 。 右 侧 边 栏 是 一 个 示例 。 列 按照 它们 
在 代码 中 的 先后 顺序 进行 堆 释 ， 因 此 通常 右 侧 边 栏 (在 垂直 堆 秋 时 ) 
会 位 于 页 面 底部 的 内 容 下 方 ， 而 我 们 并 不 希望 如 此 。Bootstrap 提供 
类 .col-*- push- * 和 .col-*-pull-* 来 改变 这 种 行为 。 当 将 这 两 个 类 应 用 
于 列 时 ， 它 们 分 别 将 其 右 推 或 左 拉 。 

一 个 在 智能 手机 视图 中 位 于 顶部 的 右 侧 栏 的 场景 如 代码 清单 4-4 
所 示 。 注 意 ， 其 中 的 列 将 在 垂直 堆 有 登 视 图 中 按照 所 需 顺序 进行 排 
列 ， 并 且 对 于 平板 电脑 和 较 大 尺寸 的 设备 ， 类 将 改变 这 些 列 的 排 
列 方式 。 

代码 清单 4-4: 重新 排序 列 


<!DOCTYPE html> 
<html lang="en"> 


<body> 
<div class="row"> 
<div class="col-sm-4 col-sm-push-8">Sidebar</div> 
<div class="col-sm-8 col-sm-pull-4">Content</div> 
</div> 


ody 
</html> 
其 他 一 些 虽 然 不 特别 针对 网 格 系统 ， 仍 然 与 自 适应 设计 相关 的 
有 用 的 类 ， 是 基于 屏幕 大 小 隐藏 元 素 的 类 : 

e@ .visible-xs-*， 仅 在 特定 设备 尺寸 (本 例 中 为 智能 手机 ) 中 显示 
元 素 。 在 该 例 中 ，* 不 是 列 数 ， 而 是 可 见 性 的 适用 范围 
(block( 块 )、inline( 内 联 )、inline-block( 内 联 块 ))。 

e .hidden-xs， 针 对 特定 设备 尺寸 ， 隐 藏 元 素 。 
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还 有 一 种 功能 ， 是 在 打印 页 面 时 隐藏 元 素 : 
e@ .visible-print- * 仅 在 打印 时 显示 元 素 。 
e .hidden-print 在 打印 时 隐藏 元 素 。 


4.2.2 排版 

正如 本 章 开头 的 图 4-1 所 示 ， 只 需要 添加 Bootstrap 库 ， 即 可 使 
hl 标签 的 外 观 更 新 潮 。 此 增强 功能 不 仅 适 用 于 标题 ， 而 且 适 用 于 其 
他 所 有 标准 HIML 元 素 。 没 必要 使 用 任何 特殊 的 语法 ， 只 需要 标准 
的 HIML 标签 。 

例如 ，blockquote 元 素 的 泻 染 如 图 4-3 所 示 。 用 于 实现 它 的 代 
码 如 代码 清单 4-5 所 示 。 


加 blockquote x 说 三 


口 x 
tt > OO | fee/sers/user/Documents/Gitub/FrontendE 六 | 三 BO 


So, to a certain degree, every web developer is already a polyglot developer. 


— Simone Chiaretta in Front-end development with ASP.NET Core, Angular, and Bootstrap 


图 4-3 blockquote 
代码 清单 4-5: blockquote 


<!DOCTYPE html> 
<html lang="en"> 


<body> 
<blockquote> 
<p>So, to a certain degree, every web developer is already 
a polyglot developer.</p> 
<footer>Simone Chiaretta in <cite title="Front-end 
development with ASP.NET Core, Angular, and Bootstrap">Front-end 
development with ASP.NET Core, Angular, and Bootstrap</cite> 
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</footer> 
</blockquote> 
</body> 
</html> 


代码 清单 同样 可 以 通过 Bootstrap 库 获 得 外 观 改善 。 使 用 <code> 
和 <pre> 元 素 时 发 生 的 外 观 变 化 如 图 4-4 所 示 。 


回 code Formatting x 


OO | ileusers/user/Documents/GitHub/Frontendr [ 


In order to format code inline, just use the <code> html element 


<p>In order to format code inline, just use the “code>&lt;code&gt;</codey html element</p> 


4-4 代码 格式 化 


4.2.3 ”表格 

与 不 需要 使 用 任何 类 即 可 获得 Bootstrap 样式 风格 的 其 他 
HTML 元 素 不 同 ， 需 要 为 表格 指定 一 个 类 。 这 是 因为 将 样式 应 用 于 
所 有 表格 ， 会 导致 在 多 种 用 户 界 面 组 件 (如 日 历 或 日 期 选择 器 ) 中 使 
用 表格 时 出 现 问 题 。 

要 应 用 Bootstrap 样式 ， 需 要 做 的 工作 是 将 .table 类 添加 到 
<table> 元 素 。 这 将 生成 一 个 在 行 之 间 带 有 水 平分 隔 符 的 标准 表格 。 
对 于 不 同样 式 的 表格 ， 还 有 另外 一 些 类 ; 

e .table-striped 添加 灰色 背景 以 交替 显示 行 。 

e .table-bordered 为 表格 本 身 和 所 有 单元 格 添加 边框 。 

e@ .table-hover 为 行 添加 鼠标 葵 停 样式 。 

e@ .table-condensed 减少 行 之 间 的 空 除 ， 使 视觉 效果 更 加 紧凑 。 

除了 这 些 与 表 相 关 的 类 以 外 ， 还 有 专用 于 行 和 单元 格 的 类 ， 用 
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于 指示 该 行 是 代表 信息 (.info)、 和 警告 warning)、 和 危险 (.dangeD 还 是 操 
作成 功 (.success)。 

最 后 ， 如 果 将 表格 封装 在 <div class='"table-responsive"> 标 签 中 
而 屏幕 尺寸 小 于 768 像素 ， 将 出 现 水 平 滚动 条 。 


4.2.4 表单 

另 一 个 Bootstrap 带 来 了 大 量 改进 的 领域 是 表单 和 表单 中 的 字 
段 。 类 似 于 表格 ， 需 要 为 表格 指定 一 个 类 。 表 单 中 的 每 个 字段 都 
必须 有 一 个 .form-control 类 , 并且 必须 与 其 标签 和 可 选 帮 助 信息 一 
起 ， 封 装 到 一 个 具有 .form-group 类 的 元 素 中 。 这 些 类 将 字段 置 为 
100% 宽 度 ， 应 用 最 佳 间 距 ， 并 以 适当 的 样式 显示 标签 和 帮助 文本 ， 
如 图 4-5 所 示 ( 代 码 清单 4-6 就 是 用 于 呈现 该 登录 表单 的 代码 )。 


加 Login Form X 


和 一口 | meWcyusersyuserpocuments/siHubyFrontendc 


Email address 

Email 
The username is your email address 
Password 


Password 


Submit 


图 4-5 登录 表单 
代码 清单 4-6: 登录 表单 的 代码 


<!DOCTYPE html> 
<html lang="en"> 


<body> 
<form> 
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<div class="form-group"> 
<label for="email">Email address</label> 
<input type="email" class="form-control" id="email" 
placeholder="Email"> 
<p class="help-block">The username is your email address</p> 
</div> 
<div class="form-group"> 
<label for="password">Password</label> 
<input type="password" class="form-control" id="password" 
placeholder="Password"> 
</div> 
<button type="submit" class="btn btn-default">Submit 
</button> 
</form> 
<x/ bodyy 
</html> 
有 两 个 类 用 于 更 改 表单 布局 : .form-inline 类 将 所 有 字段 置 于 同 
一 行 上 ， 而 .form-horizontal 类 将 标签 和 字段 置 于 同一 行 ， 并 将 各 个 
表单 组 置 于 不 同行 。 当 使 用 第 二 个 类 时 ， 表 单 布 局 使 用 本 章 开头 所 
述 的 网 格 布 局 ， 因 此 可 以 使 用 同样 的 类 名 ， 指 定 标签 和 输入 框 使 用 
的 列 数 。 
字段 也 可 以 根据 其 状态 或 验证 结果 进行 样式 设置 。 当 应 用 布 
尔 属性 disabled 以 禁用 输入 元 素 时 ， 该 元 素 也 将 变 灰 。 要 在 不 实 
际 禁用 输入 元 素 的 情况 下 获得 相同 的 视觉 效果 ， 可 应 用 readonly 
为 显示 字段 的 验证 结果 ， 可 将 验证 相关 的 类 应 用 于 表单 组 元 
素 。 这 些 类 包括 : .has-success， 表 示 验 证 通过 ; .has-error 指示 发 
生 了 一 个 验证 错误 ， 以 及 .has-warning 指示 介 于 通过 和 错误 之 间 
的 问题 。 


<div class="form-group has-success"> 
<label for="email">Email address</label> 
<input type="email" class="form-control" id="email" placeholder 
="Email"> 
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<p class="help-block">The username is your email address</P> 
</div> 


4.2.5 ”按钮 

Bootstrap 也 提供 了 用 于 设置 按钮 样式 的 类 ， 只 需要 将 .btn 应 用 
于 <button> 元 素 即 可 。 

可 将 类 与 .btn 结合 使 用 ， 更 改 按 钮 的 语义 。 可 以 使 用 .btn-primary 
识别 表单 上 的 主 按钮 ，.btn-success 识别 积极 行为 ， 或 者 .btn-danger 
识别 可 能 导致 危险 结果 的 行为 (例如 不 可 恢复 的 删除 操作 )。 

还 有 一 些 修饰 符 可 使 按钮 变 大 或 变 小 。 可 使 用 .btn-lg、.btn-sm、 
.btn-xs， 或 使 按钮 接管 父 元 素 的 所 有 宽度 的 .btn-block。 

要 查看 Bootstrap 中 可 用 的 所 有 类 ， 请 参阅 Bootstrap 网 站 上 的 
官方 文档 。 


4.3 组 件 


Bootstrap 提供 的 第 二 级 特性 是 组 件 。 它 们 由 Bootstrap 自己 的 
JavaScript 插件 增强 了 的 HTML 片段 组 成 。 Bootstrap 中 有 21 个 组 件 
可 用 ， 包 括 徽章 和 警报 等 小 功能 和 导航 栏 、 下 拉 荣 单 、 分 页 和 输入 
字段 等 更 大 的 UI 控件 。 本 章 中 不 可 能 面面俱到 地 涵盖 它们 ， 所 以 
接 下 来 的 几 页 内 容 只 是 介绍 其 中 的 一 小 部 分 。 笔 者 建议 你 阅读 官方 
文档 ， 了 解 它们 的 工作 原理 。 

4.3.1 字体 图 标 

Bootstrap 包括 250 多 个 免费 的 Halfling 字体 图 标 (glyphicon) 。 
字体 图 标 是 通过 Web 字体 和 CSS 类 实现 的 轻 量 级 图 标 。 要 在 页 面 
中 使 用 它们 ， 必 须 添加 一 个 带 有 相关 字体 类 的 <span> 元 素 。 唯 一 需 
要 记 住 的 重要 规则 是 , 用 于 字体 的 CSS 类 必须 在 其 自己 的 元 素 上 使 
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用 ， 该 元 素 未 应 用 任何 其 他 类 并 且 没 有 堪 套 元 素 。 创 建 图 4-6 中 的 


“Confirm( 确 认 )” 按 钮 所 需 的 代码 如 代码 清单 4-7 所 示 ， 该 按钮 基 
本 就 是 一 个 按钮 内 的 字体 图 标 和 一 个 标题 。 


回 Button 


x 国生 
sz le) 


| fleVWC:/Users/user/Doc 


4-6 ”Confirm 按钮 
代码 清单 4-7: Confirm 按钮 


<!DOCTYPE html> 
<html lang="en"> 


<body> 


<button type="button" class="btn btn-success btn-1g"> 


<span class="glyphicon glyphicon-ok-circle" ></span> Confirm 
</button> 
</body> 

</html> 


4.3.2 下 拉 菜 单 
下 拉 荣 单 是 最 重要 的 UI 组 件 之 一 。 不 过 ， 在 Bootstrap 中 ， 下 
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拉 菜 单 的 内 涵 略 有 不 同 。 它 不 像 在 HTML 的 select 元 素 中 一 样 用 于 

一 个 值 ， 而 更 像 是 一 个 包含 项 目的 菜单 。 

下 拉 莱 单 由 两 部 分 组 成 。 第 一 部 分 是 单 击 后 会 打开 菜单 的 触 
发 器 。 第 二 部 分 则 是 带 菜单 项 的 <ul>。 这 两 个 元 素 必须 置 于 一 个 
具有 .dropdown 类 的 元 素 中 。 一 个 下 拉 菜 单 的 示例 如 代码 清单 4-8 
所 示 。 

代码 清单 4-8: 下 拉 菜 单 


<!DOCTYPE html> 
<html lang="en"> 
<body> 
<div class="dropdown"> 
<button class="btn btn-default dropdown-toggle" type= 
"button" 
data-toggle="dropdown"> 
User Profile 
<span class="caret"></span> 
</button> 
<ul class="dropdown-menu" aria-labelledby= 
"dropdownMenul"> 
<li class="dropdown-header">Settings</1i> 
<li><a href="#">Update password</a></1i> 
<li><a href="#">Update profile</a></1i> 
<li class="disabled"><a href="#">Payment information 
</a></1i> 
<1i role="separator" class="divider"></1i> 
<li><a href="#">Logout</a></1i> 
</ul> 
</div> 
</body> 
</html> 


代码 清单 4-8 中 还 展示 了 下 拉 菜 单 的 其 他 可 选 元 素 : 
e 一 个 标题 ， 使 用 类 .dropdown-header 标识 。 
e 一 个 禁用 的 链接 ， 使 用 类 .disabled 标识 。 
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e 一 个 分 隔 链接 的 分 隔 符 ， 使 用 .divider 类 标识 。 
具有 这 些 可 选 元 素 的 菜单 如 图 4-7 所 示 。 


回 Dropdown List X 国生 


< 一 (8 | flle///C:/Users/user/Document 四 


Settings 
Update password 
Update profile 


Payment information 


Logout 


4.7 ”User Profile 下 拉 菜单 


4.3.3 输入 组 

如 何 让 Web 程序 的 用 户 输入 数据 变 得 更 简单 , 是 每 个 开发 者 都 
应 最 关注 的 问题 。 输入 组 (input group) 是 通过 扩展 标准 输入 字段 并 在 
字段 前 后 添加 文本 、 符 号 或 按钮 以 帮助 实现 这 一 目标 的 组 件 。 

输入 组 由 一 个 由 类 .input-group 标注 的 容器 元 素 定 义 ， 该 类 包含 
一 个 <span> 元 素 和 带 有 类 .form-control 的 实际 输入 字段 , 如 果 附 加 组 
件 是 文本 ， 则 <span> 元 素 中 带 有 类 .input-group-addon， 如 果 是 按钮 ， 
则 <span> 中 包含 .input-group-btn。 

在 输入 组 的 一 侧 中 ， 只 允许 一 个 附加 项 。 

代码 清单 4-9 中 展示 了 上 述 所 有 各 种 选项 。 注 意 按钮 也 可 作为 
下 拉 菜 单 的 触发 器 (如 图 4-8 所 示 )。 
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吕 Input Groups x 四 四 


€ OO | meWcmusesyuserpoamet 转交 | 三 


http://twitter. com/ | Twitter Handle 


Email @example.com 


Search for 


Races 
Athletes 


News 


图 4-8 各 种 输入 组 示例 
代码 清单 4-9: 各 种 输入 组 示例 


<!DOCTYPE html> 
<html lang="en"> 
<body> 
<div class="input-group"> 
<span class="input-group-addon">http://twitter.com/</span> 
<input type="text" class="form-control" placeholder= 
"Twitter Handle"> 
</div> 


<div class="input-group"> 
<input type="text" class="form-control" placeholder= 


"Email"> 
<span class="input-group-addon">@example.com</span> 
</div> 


<div class="input-group"> 
<input type="text" class="form-control" placeholder= 


"Search for.:。"> 


<span class="input-group-btn"> 
<button type="button" class="btn btn-default dropdown- 


toggle" 
data-toggle="dropdown">Search <span class= 
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"caret"></span> 

</button> 

<ul class="dropdown-menu dropdown-menu-right"> 
<li><a href="#">Races</a></1i> 
<li><a href="#">Athletes</a></1i> 
<li><a href="#">News</a></1i> 

</ul> 

</span> 
</div> 


</body> 
</html> 


4.3.4 导航 

是 否 具有 精心 设计 的 导航 ， 体 现 出 成 功 的 用 户 界 面 和 无 法 使 用 
的 网 站 之 间 的 区 别 。Bootstrap 可 为 各 种 类 型 的 导航 UI 提供 组 件 。 
它们 都 使 用 相同 的 方法 ， 因 为 它们 都 包装 在 一 个 <nav> 元 素 中 ， 而 
导航 元 素 都 是 一 个 HTML 列表 中 的 子 项 目 。 


1. 导航 栏 


导航 栏 可 能 是 最 知名 的 Bootstrap 组 件 ， 从 Twitter 几 年 前 的 UI 
中 很 容易 识别 它 。 此 组 件 充当 一 个 自 适应 的 容器 ， 其 中 可 以 容纳 应 
用 程序 主导 航 栏 中 的 其 他 所 有 元 素 和 组 件 。 

导航 栏 的 容器 用 .navbar 类 标记 。 它 包含 导航 栏 的 题 头 ， 题 头 
是 一 个 <div> 元 素 ， 其 类 为 .navbar-header， 该 类 可 以 是 一 个 图 像 或 只 
是 应 用 的 名 称 ( 文 本 )。 导 航 栏 的 所 有 元 素 都 是 <ul class ="nav 
navbar-nav"> 列 表 元 素 中 的 < 这 项 ， 每 个 列表 项 中 都 可 以 包含 一 个 
常规 链接 , 或 在 需要 使 用 通过 下 拉 菜 单 实 现 的 子 菜单 时 , 包含 一 个 
撕 套 列表 。 图 4-9 展示 了 一 个 完整 的 导航 栏 ， 其 中 还 包含 一 个 表单 
元 素 。 
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口 Navigation Bar x 国 


tt > OO file://C:/Users/user/Documents/GitHub/FrontendDevWithASPNETCore/Chapter%204% 六 三 攻 名 


MyApp Messages Feed Submit User Profile ~ 


4-9 ”导航 栏 示例 


一 个 有 趣 的 功能 是 ,可 将 导航 栏 配 置 为 在 屏幕 小 于 768 像素 时 ， 
折 县 为 一 个 垂直 的 移动 设备 用 菜单 (如 图 4-10 所 示 )。 为 了 启用 此 功 
能 ， 必 须 将 用 于 打开 和 关闭 栏 的 按钮 放 入 导航 栏 的 题 头 区 域 ， 并 且 
包含 导航 栏 项 目的 列表 必须 放置 在 一 个 可 折 对 元 素 内 。 


口 Navigation Bar x 


一 i Ew © Navigation Bar x | x 
》 © [hmvevwepoomen OA| 三 区 和 | ce >》 Ye 
MyApp 三 MyApp 三 
Message 

Food 

Suom 


User Profle = 


图 4-10 展开 与 折合 状态 的 自 适应 导航 栏 
代码 清单 4-10 展示 了 navbar 的 所 有 基本 特性 ， 包 括 如 何 将 元 
素 标记 为 活动 状态 。 
代码 清单 4-10: 自 适应 导航 栏 


<!DOCTYPE html> 
<html lang="en"> 


<body> 
<nav class="navbar navbar-default"> 
<div class="container-fluid"> 
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<div class="navbar-header"> 
<button type="button" class="navbar-toggle collapsed" 
data-toggle="collapse" data-target="#example-navbar- 
collapse-1" aria-expanded="false"> 
<span class="icon-bar"></span> 
icon-bar"></span> 


<span clas 
<span class="icon-bar"></span> 
</button> 
<a class="navbar-brand" href=" 
</div> 


">MyApp</a> 


<div class="collapse navbar-collapse" id="example-navbar- 
collapse-1"> 
<ul class="nav navbar-nav"> 
<li class="active"><a href="#">Messages</a></1i> 
<1i><a href="#">Feed</a></1i> 
</ul> 
<form class="navbar-form navbar-left" role="search"> 
<div class="form-group"> 
<input type="text" class="form-control" placeholder= 
"Search"> 
</div> 
<button type="submit" class="btn btn-default">Submit 
</button> 
</form> 
<ul class="nav navbar-nav navbar-right"> 
<li class="dropdown"> 
<a class="dropdown-toggle" type="button" data-toggle= 
"dropdown"> 
User Profile 
<span class="caret"></span> 


</a> 
<ul class="dropdown-menu" aria-labelledby= 
"dropdownMenul"> 


<1i class="dropdown-header">Settings</1i> 
<li><a href="#">Update password</a></1i> 
<li><a href="#">Update profile</a></1i> 
<li class="disabled"><a href="#">Payment information 
</a></1i> 
<1i role="separator" class="divider"></1i> 
<li><a href="#">Logout</a></1i> 
</ul> 
</1i> 
</ul> 
</div> 
</div> 
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</nav> 
</body> 
</html> 


导航 栏 还 有 许多 其 他 选项 ， 可 以 通过 阅读 其 官方 网 站 上 的 
Bootstrap 文档 学 习 。 


2. 分 页 


分 页 (pagination) 组 件 用 于 将 一 个 列表 分 为 多 个 页 面 以 便 快速 浏 
览 。 此 时 ， 列 表 元 素 需 要 具有 .pagination 类 。 控 件 中 的 所 有 页 面 都 
是 普通 的 列表 项 ， 可 以 通过 应 用 .disabled 类 禁用 ， 或 使 用 .active 类 
将 其 标记 为 活动 状态 。 

分 页 组 件 的 代码 如 代码 清单 4-11 所 示 , 其 显示 效果 如 图 4-11 
所 示 。 


回 Pagination x 有 


| 
> | ite/Users/user/Documents/ 六 三 唉 


« 国 | el 


图 4-11 分 页 组 件 
代码 清单 4-11: 分 页 控件 


<!DOCTYPE html> 
<html lang="en"> 
<body> 

<nav> 


<ul class="pagination"> 
<li class="disabled"><a href="#"><span>&laquo;</span> 
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</a></1i> 
<li class="active"><a href="#">1</a></1i> 
<li><a href="#">2</a></1i> 
<li><a href="#">3</a></1i> 
<li><a href="#">4</a></1i> 
<li><a href="#">5</a></1i> 
<li><a href="#"><span>&raquo;</span></a></1i> 
</ul> 
</nav> 


</body> 
</html> 


3. 面包 届 导 航 


面包 导 导 航 (Breadcrumb) 帮 助 用 户 在 分 层 内 容 结构 中 找到 它们 所 
处 的 路 径 ， 如 图 4-12 所 示 。 与 导航 栏 相 比 ， 这 个 元 素 非常 简单 ， 因 为 
它 只 是 一 个 关于 .breadcrumb 类 的 有 序列 表 ， 如 代码 清单 4-12 所 示 。 


回 breadcrumbs X 国生 


€ 仿 。 加 “| ieWcyusersyuserpocuments/ 


Home | Profile | Connections 


图 4-12 面包 必 导 航 控件 
代码 清单 4-12: 面包 导 导 航 


<!DOCTYPE html> 
<html lang="en"> 
<body> 
<ol class="breadcrumb"> 
<li><a href="#">Home</a></1i> 
<li><a href="#">Profile</a></1i> 
<li class="active">Connections</1i> 
</o1> 
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</body> 
</html> 


4. 标签 页 和 胶囊 


另 一 种 类 型 的 导航 是 页 内 导航 。 页 面 内 导航 通常 通过 标签 页 或 
“胶囊 (piD) ”来 实现 。 代 码 清单 4-13 展示 了 如 何 实现 标签 页 。 


代码 清单 4-13: 标签 页 式 导航 


<!DOCTYPE html> 
<html lang="en"> 
<body> 
<ul class="nav nav-tabs"> 
<li role="presentation" class="active"><a href="#home"> 
Home</a></1i> 
<1i role="presentation"><a href="#profile">Profile</a> 
</1i> 
<1i role="presentation"><a href="#messages">Messages</a> 
</1i> 
</ul> 
</body> 
</html> 


要 创建 胶 宫 式 导 航 ， 只 需要 用 .nav-pills 类 替换 .nav-tabs 类 。 两 
种 不 同 的 页 内 导航 选项 如 图 4-13 所 示 。 


Home | Profile Messages 


Profle Messsges 


4-13 ”标签 页 与 胶囊 式 导 航 
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本 章 后 文中 将 介绍 ， 使 用 Bootstrap JavaScript 库 可 增强 这 两 种 
导航 类 型 ， 以 在 单 击 项 目 时 自动 切换 窗 格 (pane)。 


4.3.5 ”其 他 组 件 
还 可 以 使 用 Bootstrap 创建 其 他 组 件 ， 包 括 标 签 、 徽 章 和 警报 。 
代码 清单 4-14 中 展示 了 一 些 代 码 ， 可 用 于 呈现 这 些 其 他 的 基本 
Bootstrap 组 件 ， 其 效果 如 图 4-14 所 示 。 
日 Labels, Badges,andAle! x 轿 : 


和 A > OO | fewcyrusersyuserp 六 | 


Your password is about to expire O77 


Messages 四 


| 
| Your order couldn't be processed due to an error in our system. 


图 4-14 标签 、 微 章 和 警报 
代码 清单 4-14: 标签 、 徽 章 和 警报 


<!DOCTYPE html> 
<html lang="en"> 
<body> 

<!-- Label --> 


<p>Your password is about to expire <span class="label 
label-warning">Warning</span></p> 


<!-- Badage --> 
<p>Messages <span class="badge">4</span></p> 
<l== ALert .==> 


<div class="alert alert-danger" role="alert">Your order 
couldn't be processed due to an error in our system.</div> 
</body> 
</html> 
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4.4 JavaScript 


Bootstrap 带 来 的 最 后 一 级 功能 增强 是 它 的 JavaScript 插件 库 。 
某 些 插件 会 自动 使 用 , 以 驱动 某 些 组 件 ( 如 下 拉 菜 单 或 选项 卡 式 导 航 ) 
生效 。 其 他 的 则 是 纯粹 的 JavaScript API， 可 以 自主 使 用 。 

本 章 不 详细 介绍 JavaScript 插件 库 ， 主 要 关注 API 的 一 些 简单 
用 法 ， 因 为 Bootstrap 中 JavaScript 插件 库 的 使 用 相当 复杂 ， 超 出 了 
本 书 的 范围 。 

4.4.1 标签 页 内 容 

前 文中 已 经 介绍 过 标签 页 式 导 航 。 在 Toggable Tabs 插件 的 帮助 
下 ， 导 航 可 以 打开 和 关闭 各 种 窗 格 。 这 可 以 通过 两 种 不 同 的 方式 实 
现 : 通过 JavaScript 或 仅 使 用 标记 和 数据 属性 。 


1. 使 用 JavaScript 激活 标签 页 导航 


在 按照 代码 清单 4-13 中 的 方式 设置 了 标签 页 式 导 航 之 后 , 必须 
创建 窗 格 。 它 们 只 是 简单 的 <div> 元 素 , 其 中 指定 了 role ="tabpanel"。 


<div class="tab-content"> 
<div role="tabpanel" class="tab-pane active" id="home">Home 
</div> 
<div role="tabpanel" class="tab-pane" id="profile">Profile 
</div> 
<div role="tabpanel" class="tab-pane" id="messages">Messages 
</div> 

</div> 


请 注意 ， 窗 格 的 id 与 导航 中 使 用 的 链接 中 的 锚 匹 配 。 这 非常 重 
要 , 因为 用 于 打开 窗 格 的 JavaScript 函数 .tab('show') 依 赖 于 链接 中 的 
href 和 窗 格 中 的 id 相同 。 此 方法 必须 作为 链接 的 单 击 事件 调用 ， 例 
如 $(#myTabs a [href ="#profile"]).tab('show')， 用 于 启用 配置 文件 链 
接 上 的 选项 卡 功 能 。 

一 种 更 好 的 方法 是 使 用 一 个 简单 的 jQuery 选择 器 启用 所 有 链 


146 


第 4 章 Bootstrap 入 门 


接 上 的 选项 卡 功能 。 通 过 jQuery 激活 的 选项 卡 的 
和 4-15 所 示 。 


整 代码 如 代码 清 


Im 


代码 清单 4-15: 带 有 JavaScript 的 标签 页 导航 


<!DOCTYPE html> 
<html lang="en"> 


<body> 


<ul id="myTabs" class="nav nav-tabs"> 
<1i role="presentation" class="active"><a href="#home"> 


Home</a></1i> 
<1i role="presentation"><a href="#profile">Profile</a> 
</1i> 
<li role="presentation"><a href="#messages">Messages 
</a></1i> 

</ul> 


<div class="tab-content"> 
<div role="tabpanel" class="tab-pane active" id="home"> 
Homediv> 
<div role="tabpanel" class="tab-pane" id="profile"> 
Profilediv> 
<div role="tabpanel" class="tab-pane" id="messages"> 
Messages</div> 

</div> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/ 
1.12.4/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 


<script type="text/javascript"> 
$('#myTabs a') .click(function (e) { 
e.preventDefault () 
$ (this) .tab('show') 
DD); 
</script> 


</body> 
</html> 


2. 使 用 数据 属性 激活 标签 页 导航 
通过 标记 中 的 数据 属性 激活 标签 页 甚至 更 简单 。 需 要 做 的 只 是 
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在 导航 栏 中 添加 data-toggle ="tab"， 如 代码 清单 4-16 所 示 。 
代码 清单 4-16: 使 用 数据 属性 实现 标签 页 导航 


<!DOCTYPE html> 
<html lang="en"> 
<body> 
<ul id="myTabs" class="nav nav-tabs"> 
<li role="presentation" class="active"><a href="#home" 
data-toggle="tab">Home</a></1i> 
<li role="presentation"><a href="#profile" 
data-toggle="tab">Profile</a></1i> 
<li role="presentation"><a href="#messages" 
data-toggle="tab">Messages</a></1i> 
</ul> 


<div class="tab-content"> 
<div role="tabpanel" class="tab-pane active" id="home"> 


Home</div> 
<div role="tabpanel" class="tab-pane" id="profile"> 
Profile</div> 
<div role="tabpanel" class="tab-pane" id="messages"> 
Messages</div> 
</div> 
</body> 
</html> 


4.4.2 ” 模 态 对 话 框 

另 一 个 常用 的 UI 控件 是 模 态 (modaD) 对 话 框 。 该 Bootstrap 插件 
的 功能 非常 简单 : 它 显示 并 关闭 模 态 对 话 框 。 男 一 方面 ， 模 态 对 话 
框 本 身 所 需 的 HTML 代码 有 点 宛 长 , 但 只 要 理解 了 ， 就 会 发 现 它 具 
有 很 强 的 逻辑 性 。 

它 以 一 个 外 部 的 <div> 元 素 开头 , 其 中 的 .modal 类 表示 涵盖 整个 
页 面 的 覆盖 层 。 在 该 元 素 中 还 有 另 一 个 <div> 元 素 , 以 类 .moda-dialog 
进行 标记 。 该 元 素 才 是 实际 的 模 态 对 话 框 , 它 包含 三 个 独立 的 区 域 : 

e@ 由 <div class ="modal-header"> 定 义 的 模 态 题 头 包含 对 话 框 的 

标题 和 关闭 按钮 。 
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e@ 对 话 框 的 实际 内 容 包 含 在 <div class ="modal-body"> 内 。 

e@ <div class = "modal-footer"> 内 的 页 脚 是 对 话 框 动作 按钮 的 预 
期 放置 位 置 。 

用 于 泻 染 图 4-15 对 话 框 的 完整 代码 如 代码 清单 4-17 所 示 。 

Modal Dialog x 国生 


€ > OO | fey/eusersiuser/Docur 


Logout 


You are about to log out from the system. Do you want to proceed? 


Sense 


图 4-15 模 态 对 话 框 
代码 清单 4-17: 模 态 对 话 框 


<!DOCTYPE html> 
<html lang="en"> 
<body> 
<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary btn-lg" 
data-toggle="modal" data-target="#myModal"> 
Launch logout modal 


</button> 

<!-- Modal --> 

<div class="modal fade" id="myModal" tabindex="-1" role= 
"dialog"> 


<div class="modal-dialog" role="document"> 
<div class="modal-content"> 
<div class="modal-header"> 
<button type="button" class="close" 
data-dismiss="modal">&times;</button> 
<h4 class="modal-title" id="myModalLabel">Logout 
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</h4> 

</div> 

<div class="modal-body"> 
You are about to log out from the system. Do you want 
to proceed? 

</div> 

<div class="modal-footer"> 
<button type="button" class="btn btn-default" 

data-dismiss="modal">Cancel</button> 

<button type="button" class="btn btn-primary"> 
Logout</button> 

</div> 

</div> 
</div> 
</div> 


</body> 

</html> 

该 模块 的 打开 非常 简单 。 与 其 他 大 多 数 Bootstrap 插件 一 样 ， 
该 操作 可 通过 标记 或 代码 完成 。 要 使 用 标记 完成 该 操作 ， 如 代码 
清单 4-17 所 示 , 只 需要 在 用 于 打开 对 话 框 的 元 素 中 设置 data-toggle= 
"modal"， 并 设置 data-target="#myModal"， 以 指示 要 打开 哪个 模 态 
对 话 框 。 


<button type="button" class="btn btn-primary btn-lg" data- 
toggle="modal" data-target="#myModal">Launch logout modal</button> 


$('myModal").modal(show') 方 法 可 用 于 在 JavaScript 中 打开 模 态 


4.4.3 工具 提示 和 弹出 对 话 框 

其 他 不 需要 太 多 工作 量 即 可 实现 的 核心 插件 是 工具 提示 (tooltip) 
和 弹出 式 对 话 框 (popover)， 如 图 4-16 所 示 。 它们 基本 上 是 同一 种 东 
西 一 一 出 现在 一 个 元 素 旁 边 的 文字 气泡 框 一 一 但 有 一 些微 小 但 重要 
的 差异 。 工 具 提示 在 将 鼠标 悬 停 在 元 素 上 时 出 现 ， 而 弹出 式 对 话 框 
则 在 单 击 时 出 现 。 弹 出 式 对 话 框 也 有 工具 提示 中 没有 的 标题 。 
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Pay your order 


The payment operation can take 
between 30 and 60 seconds Be 


patient! 


4-16 工具 提示 和 弹出 式 对 话 框 

与 其 他 插件 类 似 ， 工 具 提 示 和 弹出 式 对 话 框 都 可 以 使 用 
JavaScript 或 通过 标记 进行 配置 。 

要 通过 标记 创建 它们 , 只 需要 在 元 素 上 设置 data-toggle="tooltip" 
或 data-toggle="popover" 即 可 。 还 可 以 选用 data-placement="left" 设 置 
工具 提示 的 位 置 。 然 后 使 用 title 属性 指定 工具 提示 的 文本 和 弹出 式 
对 话 框 的 标题 ， 并 通过 data-content 属性 指定 弹出 式 对 话 框 的 内 容 。 
出 于 性 能 方面 的 原因 ， 与 自动 启用 的 其 他 插件 不 同 ， 工 具 提 示 和 弹 
出 式 对 话 框 必须 通过 JavaScript 方法 $0.tooltip0 和 $0O.popover0 手 动 
加 入 。 这 两 个 组 件 的 代码 如 代码 清单 4-18 和 代码 清单 4-19 所 示 。 


代码 清单 4-18: 工具 提示 


<!DOCTYPE html> 
<html lang="en"> 
<body> 
<button id="saveBtn" type="button" class="btn btn-default" 
data-toggle="tooltip" 
data-placement="right" 
title="Click to save">Save</button> 


<script type="text/javascript"> 
$('#saveBtn') .tooltip(); 
</script> 
</body> 
</html> 
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代码 清单 4-19: 弹出 式 对 话 框 


<!DOCTYPE html> 

<html lang="en"> 

<body> 

<button id="payBtn" type="button" class="btn btn-default" 

data-toggle="popover" 
data-placement="right" 
title="Pay your order" 
data-content="The payment operation can take between 
30 and 60 seconds. Be patient!">Pay!</button> 


<script type="text/javascript"> 
$('#payBtn') .popover (); 
</script> 


</body> 
</html> 


4.5 使 用 Less 定制 Bootstrap 


Bootstrap 是 使 用 Less( 一 种 CSS 预 处 理 语言 ) 开 发 的 。 这 样 做 的 
一 个 好 处 是 可 以 很 容易 地 定制 它 ， 以 更 好 地 适应 应 用 程序 的 外 观 和 
风格 ， 而 不 必 履 盖 所 有 CSS 文件 中 的 全 部 内 容 。 这 可 以 通过 两 种 不 
同 的 方式 完成 : 通过 Bootstrap 网 站 操作 , 或 下 载 源 代码 并 手动 更 新 
Less 或 Sass 文件 。 


4.5.1 通过 网 站 定制 

Bootstrap 官方 网 站 提供 了 一 个 定制 页 面 ， 允 许 开 发 者 更 改 框架 
的 默认 样式 (如 图 4-17 所 示 )。 此 外 ， 它 还 提供 了 选择 将 哪些 样式 、 
组 件 和 插件 包含 在 编译 文件 中 的 选项 。 如 果 希 望 减 小 从 网 站 下 载 的 
文件 的 大 小 ， 可 使 用 这 些 选项 。 

可 通过 URL http://getbootstrap.com/customize/ 访 问 该 定制 页 面 。 

在 该 页 面 上 可 向 下 演 动 以 查找 所 需 的 变量 ， 也 可 从 右 侧 的 菜 
单 中 选择 要 定制 的 框架 区 域 。 例 如 ， 如 果 希 望 将 按钮 、 导 航 栏 和 
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标签 的 success 样式 的 绿色 修改 为 男 一 种 绿色 色调 ， 则 可 更 改 @brand- 


success 变量 o 
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4-17 ”Bootstrap 定制 器 


完成 所 有 定制 后 ， 向 下 滚动 到 页 面 底部 ， 然 后 单 击 Compile and 
Download 按钮 。 这 将 生成 一 个 带 有 你 指定 的 Bootstrap 版 本 的 zip 
文件 。 它 还 会 将 你 的 特有 配置 保存 到 GitHub( 以 gist 形式 ) 以 及 刚 下 
载 的 zip 文件 内 的 config.json 文件 中 。 代 码 清单 4-20 中 展示 了 该 
configjson 文件 的 一 个 片段 。 注 意 ， 在 末尾 处 ， 该 文件 包含 用 于 直 
接 使 用 此 特定 配置 打开 定制 工具 的 URL。 

代码 清单 4-20: config.json 文件 

{ 


全 
"egray-base": "#000", 
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"@brand-primary": "darken (#428bca, 6.5%)", 
"@brand-success": "#00FFOO", 
"@brand-info": "#5bc0de", 
"@brand-warning": "#f0ad4e", 
"@brand-danger": "#d9534f", 


}, 

oa 
"print.less", 
"type.less", 
"code.less", 


"alertsjs™s 
"button. js"s 


]， 
"customizerUrl": 
"http://getbootstrap.com/customize/?id=b21b62d56781c2e2ea87" 
} 


如 果 需 要 对 样式 进行 快速 调整 ， 并 且 开 发 工作 流程 中 不 使 用 
Less( 或 Sass)， 则 此 工具 非常 有 用 。 但 如 果 需 要 人 迭代 性 更 好 的 方法 ， 
并 已 使 用 了 Less， 那 么 直接 修改 变量 可 能 会 更 好 。 


4.5.2 ”使 用 Less 定制 

为 直接 编辑 Less 变量 ， 需 要 下 载 Bootstrap 的 源 代码 。 放 置 实 
际 CSS 样式 代码 的 文件 夹 名 为 less。 在 该 文件 夹 中 , 每 个 CSS 区 域 
和 组 件 都 包含 一 个 对 应 的 Less 文件 ， 此 外 有 一 个 名 为 variables.less 
的 文件 。 后 者 是 更 改 Bootstrap 中 任意 组 件 样式 时 所 需 修改 的 文件 。 
该 文件 的 开头 部 分 如 代码 清单 4-21 所 示 ， 其 中 变量 @brand-success 
已 通过 在 线 自 定 义工 具 进 行 了 更 改 。 

代码 清单 4-21: variables.less 文件 的 开头 


i 
// Variables 
EDA 
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//== Colors 
// 


//## Gray and brand colors for use across Bootstrap. 


Qgray-base: #000; 

@gray-darker: lighten (@gray-base, 13.5%); // #222 
Q@gray-dark: lighten (@gray-base, 20%); // #333 
@gray: lighten (@gray-base, 33.5%); // #555 
Q@gray-light: lighten (@gray-base, 46.7%); // #777 
@gray-lighter: lighten (@gray-base, 93.5%); // #eee 
@brand-primary: darken (#428bca, 6.5%); // #337ab7 
@brand-success: #5cb85c; 

@brand-info: #5bcO0de; 

@brand-warning: #f0ad4e; 

@brand-danger: #d9534f; 


完成 所 有 更 改 后 ，Grunt 负责 将 Less 代码 编译 到 最 终 的 CSS 文 
件 中 。 第 6 章 详细 介绍 如 何 使 用 Grunt 运行 此 类 构建 任务 ， 但 如 果 
已 经 设置 好 该 工具 ， 只 需要 输入 grunt dist， 即 可 生成 更 新 后 的 CSS 
文件 。 


4.6 Visual Studio 2017 和 ASP.NET Core 


中 的 Bootstrap 支持 


正如 你 可 能 已 经 注意 到 的 那样 ，Bootstrap 为 其 所 有 样式 和 组 件 
使 用 了 大 量 的 CSS 类 和 HTML 代码 片段 。 如 果 没 有 优秀 的 自动 完 
成 功能 和 代码 片段 库 ， 开 发 者 将 不 得 不 依赖 记忆 力 和 文档 。 

Visual Studio 通过 提供 CSS 自动 完成 功能 获得 助力 ， 该 功能 
显示 Bootstrap 中 可 用 的 所 有 类 ， 如 图 4-18 所 示 。 

Visual Studio 2017 还 包含 一 个 优秀 的 代码 片段 库 ， 开 发 者 可 以 
在 其 中 保存 最 常用 的 代码 片段 。Visual Studio 中 的 代码 片段 功能 非 
常 强大 ， 因 为 它们 清楚 地 标 出 哪些 部 分 是 固定 的 ， 哪些 部 分 (通常 只 
是 名 称 或 ID) 可 以 更 改 。 
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4-18 ”Bootstrap 自动 完成 


Visual Studio 没有 附带 Bootstrap 片段 ， 但 它 可 以 感知 项 目 是 否 
使 用 Bootstrap 并 给 出 可 能 提供 帮助 的 第 三 方 扩展 程序 ， 如 图 4-19 
所 示 。Visual Studio 建议 安装 以 下 两 个 扩展 程序 : 

e@ Bootstrap Snippet Pack 
© Glyphfriend 
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图 4-19 推荐 的 第 三 方 扩展 程序 
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4.6.1 Bootstrap Snippet Pack 

顾名思义 ， 该 扩展 程序 是 一 个 包含 30 个 以 上 代码 片段 的 集合 ， 
只 需要 将 它们 从 Visual Studio 工具 箱 中 拖 出 , 即 可 添加 到 HTML 页 
面 中 (请 参见 图 4-20)。 
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4-20 Bootstrap Snippet Pack 工具 箱 


大 多 数 Bootstrap 组 件 都 是 由 长 段 HTML 代码 组 成 的 ， 其 中 大 
部 分 必须 按 原样 复制 ， 只 需要 更 改 几 个 字符 串 。 因 为 可 以 修改 的 字 
符 串 被 明确 标 出 ， 并 且 可 以 使 用 Tab 键 在 它们 之 间 循 环 切换 ， 开 发 
工作 变 得 非常 容易 。 

例如 ， 在 模 态 对 话 框 的 代码 片段 (代码 清单 4-17) 中 ， 唯 一 需要 
定制 的 字符 串 是 ID、 标 题 、 内 容 和 两 个 按钮 的 文本 。 如 图 4-21 所 
示 ， 这 些 字符 串 被 突出 显示 以 便 识别 。 
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aria-hidden="true" Stines;¢/span></button> 


Ho0% -4 


图 4-21 模 态 对 话 框 代码 片段 
4.6.2 Glyphfriend 


通过 在 自动 完成 下 拉 列 表 中 显示 预览 ， 此 扩展 程序 可 以 帮助 选 
择 Bootstrap 中 的 字体 图 标 (如 图 4-22 所 示 )。 


Wootten -Macon ve mio TT Px 
EE ED yew Polcr Mp Diawe TEA Ioos AMMmicuRE Test AnzE Woow Hi? smn 加 
9- 曲目- 容 症 昌 |9 -Spa -wa | ep- 名 -| 严 ,j 昌 这 王 全 | 网 呈 全 放 。 


日 【HE SP 
PP ophcon ce lhy tasted 


4-22 自动 完成 下 拉 菜 单 中 的 字体 图 标 


该 扩展 不 限于 Bootstrap。 它 支持 其 他 所 有 Font Awesome 图 标 ， 
以 及 Ionic、Foundation、IcoMoon 和 GitHub 的 Octicons。 它 甚至 能 
在 将 Visual Studio 作为 markdown 语法 编辑 器 使 用 时 ， 支 持 Emoji 
表情 符号 。 
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4.6.3 ASPNET Core 的 标签 帮助 程序 

另 一 种 有 助 于 更 容易 地 编写 Bootstrap 组 件 的 方法 是 ASPNET 
Core 标签 帮助 程序 。 标签 帮助 程序 是 可 以 在 运行 时 呈现 任意 HTML 
标记 的 自 定 义 标签 。 

遗憾 的 是 , 没有 能 为 所 有 Bootstrap 组 件 提供 帮助 程序 的 库 , 但 
是 有 一 个 社区 驱动 的 帮助 程序 项 目 ， 其 中 包括 Alert( 警 告 )、 
ProgressBar( 进 度 条 ) 和 Modal Dialog( 模 态 对 话 框 ) 组 件 的 帮助 程序 。 
该 库 可 以 从 NuGet 中 下 载 ， 库 名 为 TagHelperSamples.Bootstrap 。 以 
模 态 对 话 框 为 例 ， 使 用 该 库 提供 的 标签 帮助 程序 ， 宛 长 的 HIML 代 
码 片段 成 为 代码 清单 4-22 中 所 示 的 几 行 代码 。 


代码 清单 4-22: 使 用 标签 帮助 程序 的 模 态 对 话 框 (Views\Home\ 
Index.cshtml) 


<button type="button" class="btn btn-primary" bs-toggle- 
modal="simpleModal"> 
Launch modal 
</button> 
<modal id="simpleModal" title="Modal Title"> 
<modal-body> 
<h4>Something happened</h4> 
<p>Something happened</p> 
</modal-body> 


</modal> 
在 对 话 框 触发 器 中 添加 了 一 个 bs-toggle-modal 属性 ， 用 于 指定 
要 打开 的 模 态 对 话 框 名 称 。 显 然 ， 此 时 必须 使 用 <modal> 标 签 定义 


模 态 对 话 框 。 如 代码 清单 4-22 所 示 ， 对 话 框 的 实际 内 容 置 于 
<modal-dialog> 标 签 中 。 可 选择 使 用 <modal-footer> 来 指定 对 话 框 的 
其 他 按钮 。 

如 果 还 需要 其 他 Bootstrap 组 件 的 帮助 程序 , 也 可 以 随时 自行 编 
写 。 如 第 1 章 所 述 ， 编 写 标签 帮助 程序 并 不 是 特别 困难 。 如 果 只 是 
为 了 满足 自己 的 特定 需求 而 开发 ， 而 不 是 向 社区 发 布 代 码 ， 以 歼 盖 
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所 有 可 能 场景 为 目的 ， 情 况 更 是 如 此 。 

作为 说 明 为 Bootstrap 构建 一 个 简单 标签 帮助 程序 有 多 么 容易 
的 示例 , 代码 清单 4-23 展示 了 一 个 Alert 标签 帮助 程序 的 简化 版 本 ， 
它 是 上 述 Bootstrap 标签 助手 库 的 一 部 分 。 


代码 清单 4-23: 简化 的 Alert 标签 帮助 程序 
(TagHelpers\AlertSimpleTagHelper.cs) 


using System.Threading.Tasks; 
using Microsoft.AspNet.Razor.TagHelpers; 


namespace AlertTagHelper.TagHelpers 
{ 
[HtmlTargetElement ("alert")] 
public class AlertSimpleTagHelper : TagHelper 


{ 
[HtmlAttributeName ("type")] 
public string AlertType { get; set; } 
public override void Process (TagHelperContext context, 
TagHelperOutput output) 
{ 
output.TagName = "div"; 
var cssClass = "alert alert-"+AlertType; 
output.Attributes.Add("class", cssClass); 
output .Attributes.Add ("role", "alert"); 


} 

该 帮助 程序 与 标记 <alert type="danger">Something Went 
Wrong!</alert> 一 起 使 用 ， 这 比 编写 代码 清单 4-14 的 Bootstrap 组 件 
所 需 的 代码 片段 要 简洁 得 多 。 


4.7 ”本 章 小 结 


通过 应 用 UX 和 自 适 应 设计 中 的 所 有 最 佳 实践 ，Bootstrap CSS 
使 得 即使 是 非 设计 人 员 ， 也 可 以 十 分 简单 地 构建 一 个 引 人 注 目的 用 
户 界面 。 为 使 Bootstrap 在 外 观 上 更 适合 你 的 应 用 程序 ,可 选用 社区 


xX 
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提供 的 几 个 可 用 主题 ， 对 于 非常 特殊 的 情况 ，Bootstrap 的 所 有 内 容 
均 可 使 用 Less 很 容易 地 定制 ,尽管 有 时 Bootstrap 有 点 见长 ,但 Visual 
Studio 提供 了 一 些 可 简化 其 工作 的 工具 ， 如 果 你 更 喜欢 在 服务 器 端 
代码 背后 抽象 客户 端 代码 片段 , ASPNET Core 的 标签 助手 允许 定义 
自己 的 服务 器 端 标 签 。 
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Bp 
第 昔 


使 用 NuGet 和 Bower 管理 依 
赖 关 系 


本 章 主要 内 容 : 

e@ 包 管 理 器 简介 

e NuGet、Bower 和 NPM 的 用 法 介绍 

e@ 如 何 重新 分 发 组 件 

e@ Visual Studio 2017 中 对 包 管 理 器 的 文 持 


前 面 的 章节 已 经 说 明 ， 现 代 软 件 开发 (包括 前 端 和 服务 器 端 ) 基 
于 小 型 而 非常 集中 、 可 根据 需要 进行 组 合 的 组 件 。 

遗憾 的 是 ， 尽 管 摆 脱 过 去 的 大 一 统 框架 是 件 好 事 ， 但 这 种 新 方 
法 引入 了 一 个 问题 : 要 如 何 管理 所 有 这 些 组 件 ? 组 件 通常 依赖 于 其 
他 一 些 组 件 ， 被 依赖 的 组 件 又 依赖 于 一 些 其 他 组 件 ， 而 最 后 这 些 组 
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件 又 依赖 于 …… 相 信 你 已 经 知道 了 问题 所 在 。 而 使 问题 变 得 更 困难 
的 是 ， 可 能 有 一 个 组 件 ， 在 此 称 为 A， 它 依赖 于 组 件 了 B， 但 还 有 另 一 
个 组 件 C 也 依赖 于 B， 但 依赖 的 是 B 的 另 一 个 版 本 。 除 此 之 外 ， 所 
有 组 件 都 必须 保持 最 新 。 最 后 ， 在 某 些 情况 下 ， 要 正确 安装 组 件 可 
能 还 需要 执行 其 他 操作 , 例如 编译 某 些 本 地 库 或 更 改 某 些 配置 文件 。 

幸运 的 是 ， 所 有 这 些 任 务 都 可 通过 称 为 包 管 理 器 (package 
manager) 的 专用 工具 自动 完成 。 在 ASPNET Core MVC 进行 前 端 开 
发 环境 中 ， 需 要 了 解 三 个 包 管理 器 : 

e 用 于 管理 .NET 库 的 NuGet 

e@ 用 于 管理 客户 端 (JavaScript 和 CSS) 库 的 Bower 

e 用 于 管理 开发 过 程 中 所 用 工具 的 安装 的 NPM 

本 章 余 下 部 分 将 介绍 如 何 使 用 这 三 个 包 管理 器 ， 以 及 如 何 将 组 
件 发 布 为 软件 包 。 但 在 学 习 每 种 工具 的 细节 前 ， 还 需要 了 人 解 适用 于 
所 有 包 管理 器 的 一 些 概念 。 


本 章 代码 下 载 


”本 章 的 相关 代码 可 通过 网 站 wwwwrox.com 下载。 搜索 该 书 的 


164 


ISBN(978-1-119-18131-6)， 可 在 第 5 章 的 下 载 部 分 找到 对 应 代码 。 


5.1 共同 概念 


所 有 包 管 理 器 ， 除 了 因为 其 所 面向 的 不 同 技术 或 语言 所 导致 的 
明显 差异 之 外 ， 实 际 上 都 是 相同 的 。 以 下 是 它们 的 共同 概念 ; 

e 它们 都 依赖 一 个 包含 所 有 已 发 布 软件 包 的 公共 注册 表 。 该 注 
册 表 中 可 能 还 会 存储 实际 的 软件 包 , 也 可 能 只 提供 可 下 载 软 
件 包 的 URL。 

e 下 载 软件 包 并 存储 在 一 个 本 地 文件 夹 中 ， 用 于 充当 本 地 组 
存 ; 本 地 文件 夹 位 于 当前 文件 夹 中 。 这 样 ， 当 一 个 项 目 需要 
一 个 已 经 下 载 的 包 时 , 它 会 直接 从 缓存 中 复制 而 不 必 再 次 下 
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载 (假定 缓存 中 是 最 新 的 版 本 )。 这 节省 了 带宽 和 时 间 ( 尤 其 是 
在 每 次 生成 项 目 期 间 都 恢复 包 时 )。 它 还 能 够 在 一 定 程度 上 
提供 离线 开发 功能 ， 否 则 是 不 可 能 实现 的 。 

e 项 目 声 明 它 们 依赖 哪些 第 三 方 库 。 该 功能 通常 通过 在 JSON 
文件 中 指定 包 的 名 称 及 其 版 本 实现 。 

e 包 管 理 器 不 仅 要 下 载 项 目的 依赖 关系 , 还 要 下 载 它 们 依赖 的 
库 ， 自 项 向 下 遍历 整个 软件 包 树 。 

了 解 这 些 基 本 的 共同 概念 后 ， 接 下 来 即 可 学 习 称 为 NuGet 

的 .NET 包 管 理 器 。 


5.2 NuGet 


NuGet 是 NET 库 的 包 管 理 器 。 自 2010 年 起 ，Visual Studio 中 
就 包含 了 它 。 对 于 Visual Studio 2017 和 ASPNET Core, 情况 发 生 了 
一 些 变化 。 之 前 它 用 于 管理 所 有 内 容 ， 而 现在 由 于 Bower 的 引入 ， 
它 的 应 用 范围 仅 限 于 .NET 库 。 


注意 

从 技术 角度 看 ，NuGet 仍然 可 以 制作 客户 端 软件 包 ， 但 软件 包 
浏览 器 将 自动 识别 ， 并 指示 用 户 在 Bower 中 查找 同一 个 软件 包 ， 如 
图 5-1 所 示 。 


男 jQuery by jQuery Foundation, Inc. 28.3M downlcads v3.1.1 
Incompatible: Use Bower i 


jQuery is a new kind of JavaScript Library. 


bootstrap by The Bootstrap Authors, Twitter Inc. 8.22M downloads v4.0.0-alpha6 
Incompatible: Use Bower instead 
Prerelease Bootstrap framework in CSS. Includes fonts and JavaScript 


5-1 NuGet Package Manager 中 显示 仅 适 用 客户 端的 软件 包 


虽然 NuGet 可 能 已 经 失去 对 客户 端 软件 包 的 支持 , 但 随 着 .NET 
Core 的 推出 ， 它 又 获得 了 一 个 重要 的 新 特性 ， 从 而 成 为 所 有 系统 库 


165 


Web 前 端 开 发 一 一 使 用 ASPNET Core、Angular 和 Bootstrap 


的 交付 方法 。 


NuGet 简 史 

在 2008 年 举办 的 ALTNET 西雅图 会 议 上 ， 由 Scott Hanselman 
领导 的 一 个 会 议 小 组 讨论 了 如 何 通过 使 库 更 易于 找到 .下 载 和 安装 ， 
来 鼓励 .NET 开发 者 使 用 开放 源 代码 。 

当时 人 们 讨论 了 重用 ruby-gem 基础 设施 以 交付 库 , 但 最 终 同意 建 
立 一 个 更 接近 .NET 工具 集 的 类 似 工具 。 一 些 开源 项 目 就 从 那天 开始 启 
动 。 其 中 之 一 最 初 称 为 NuPack， 后 来 成 为 今天 人 们 熟知 的 NuGet。 


5.2.1 使 用 NuGet 获取 软件 包 
可 以 通过 多 种 方式 安装 NuGet 软件 包 。 具 体 选 择 使 用 哪 种 方式 ， 
则 取决 于 包 管 理 器 的 使 用 环境 和 个 人 偏好 。 


1. 使 用 Package Manager 图 形 界面 


第 一 种 获取 软件 包 的 可 选 方式 是 使 用 Package Manager 图 形 界 
面 。 它 可 以 在 Visual Studio 中 通过 主 菜 单 Tools | NuGet Package 
Manager 访问 ， 或 者 右 击 Solution Explorer 窗口 中 解决 方案 树 的 
Dependencies 节点 。 这 两 个 选项 都 显示 在 图 5-2 中 。 


MEW PAROJRCT BUD DEBUG TEAM | TOOLS | ARHMTECTURE TEST ANAIYZE WNDOW HEP] 


5-2 ”如 何 打开 NuGet Package Manager 


在 该 图 形 界面 中 (如 图 5-3 所 示 )， 可 以 搜索 软件 包 并 将 其 安装 
到 当前 项 目 中 ， 还 可 选择 安装 的 版 本 。 
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NuGet Package Manager WebApplication2 


Pockage source moeterg -J 


j #@ Newonsofouson 


| 
© opions 
@ (NUnit by Care Pooke 7.51M downloods 50 (Description 
NUnl is a emit tecting famework fer a NET lenguages wth a ston son NET is a popelsr high -perfomance ISON framework for NET 
Merior 902bela2 


‘@® jQuery ty oe Foondsion nc mdomioed wa 
ee 


empoeale oe tame 
Ov snow nd ol asarot Urey 
Glen ee by Te boowwmp por ae ec do vid ett 
rm et CE es onts el eect 
六 emopper ym soord sm ores “0 


5-3 NuGet Package Manager 的 图 形 界面 


2. 使 用 Package Manager Console 


如 果 你 更 喜欢 使 用 命令 行 工具 , 第 二 种 可 选 的 获取 包 方 式 ( 仍 在 
Visual Studio 中 ) 是 使 用 Package Manager Console, 通常 它 位 于 Visual 
Studio 窗口 底部 。 如 果 该 窗口 尚未 开启 ， 可 以 通过 Tools|NuGet 
Package Manager 菜单 打开 。 

在 该 窗口 中 ， 可 使 用 一 些 命令 查找 软件 包 并 将 其 安装 到 项 目 中 。 

e@ 使 用 Find-Package -Id Json 查找 软件 包 ， 该 命令 的 输出 如 图 

5-4 所 示 。 

e@ 使 用 Install-Package Newtonsoft.Json 安装 一 个 新 软件 包 。 

e@ 使 用 Get-Package 列 出 所 有 已 安装 的 软件 包 。 

e@ 使 用 Uninstall-Package Newtonsoft.Json 卸载 一 个 已 安装 的 软 

件 包 。 


Li 


Package om -| 净 |Defauk project | sewebapptcaton2 


到 Versions Description 


Re 
json-serialize {1.2} 
Hocoding, FasyoocDb.Ison {2.9-2) 
Scriptcs.]son {9.1-8} 
ake .san 


100% ~ 


5-4 NuGet Package Manager Console 
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3. 手动 编辑 .csproj 项 目 配置 文件 


最 后 一 种 可 选 方式 是 直接 编辑 csproj 项 目 配置 文件 。 

在 .NET Core 项目 中 引入 的 新 .csproj 项 目 配置 格式 包含 许多 不 
同 的 区 段 (section)， 但 在 此 感 兴趣 的 部 分 是 包含 <PackageReference> 
元 素 的 <ItemGroup> 区 段 ， 该 部 分 用 于 指定 项 目 依 赖 哪些 包 及 其 版 
本 。 一 个 2.0 版 本 的 示例 ASPNET Core 项 目的 .csproj 项 目 文件 如 代 
码 清单 5-1 所 示 。 如 第 1 章 所 述 , 它 只 包含 对 Microsoft.AspNetCore. 
All 元 数据 包 的 引用 。 


代码 清单 5-1: 示例 ASP.NET Core 项 目 配置 文件 
<Project Sdk="Microsoft.NET.Sdk.Web"> 


<PropertyGroup> 
<TargetFramework>netcoreapp2.0</TargetFramework> 
</PropertyGroup> 


<ItemGroup> 
<PackageReference Include="Microsoft.AspNetCore.All" Version= 
wa O00" /> 

</ItemGroup> 


<ItemGroup> 
<DotNetCliToolReference Include="Microsoft.VisualStudio. 
Web.CodeGeneration.Tools" Version="2.0.0" /> 
</ItemGroup> 


</Project> 


如 果 不 知道 包 的 名 称 或 版 本 ，Visual Studio 2017 会 显示 一 个 自 
动 完成 菜单 ， 并 在 此 上 下 文中 提供 搜索 功能 。 自 动 完成 功能 可 用 于 
包 名 和 版 本 号 ， 如 图 5-5 所 示 。 

另外 ， 如 果 不 知道 具体 的 版 本 号 ， 或 希望 为 未 来 的 补丁 程序 预 
留 开放 接口 , 则 可 以 使 用 版 本 范围 浮动 表示 法 指定 版 本 , 例如 8.0.*。 
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Json NET ts a popular high periormance JSON 
ramework for NET 


图 5-5 在 .csproj 项 目 文件 中 使 用 智能 提示 
软件 包 引 用 的 自动 完成 功能 


截止 本 书 出 版 时 ，Visual Studio 2017 中 可 能 尚 不 具备 对 软件 包 


引用 的 自动 完成 功能 ， 但 Visual Studio 扩展 程序 “Project File Tools( 项 
目 文件 工具 )” 中 提供 了 此 特性 ， 可 从 https://marketplace.visualstudio 
.colyitems2itemName=MS-madsk.ProjectFileTools 下 载 该 程序 。 


4. 安装 软件 包 后 发 生 的 行为 


与 以 前 版 本 的 NuGet 相 比 ， 一 个 很 大 的 不 同 之 处 在 于 安装 一 个 
软件 包 ， 只 意味 着 在 .csproj 项 目 文件 中 添加 一 个 新 条 目 。 男 外 ， 使 
用 Package Manager 图 形 界面 或 控制 台 时 ， 不 会 下 载 任何 内 容 。 它 
们 也 只 是 在 文件 内 写 入 包 ID 和 版 本 。 

只 要 .csproj 文件 发 生 更 改 ，Visual Studio 就 会 启动 NET Core CLI 
并 运行 restore 命令 (如 图 5-6 所 示 )。 正 是 该 跨 平台 工具 连接 到 
nuget.org 服务 器 , 下载 软 件 包 并 将 它们 保存 在 用 户 文件 夹 (C:\Users\ 
user\.nuget\packages\) 中 。 与 以 前 版 本 的 NuGet 不 同 ， 软 件 包 不 会 在 
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当前 项 目的 一 个 文件 夹 中 同样 保存 一 个 副本 ， 而 是 直接 从 用 户 文件 
夹 引 用 。 


Error List Output Package Manager Console 


自 Restoring packages for CNProjectsWebApplication2\src\WebApplication2\WebApplication2.csproj。 


5-6 ”Restore 操作 通知 


5.2.2 发 布 自 己 的 软件 包 

有 时 ， 你 可 能 会 发 现 自己 需要 发 布 一 个 NuGet 包 ， 可 能 是 因为 
想 将 自己 开发 的 某 些 东西 提供 给 .NET 社区 ,也 可 能 是 因为 希望 以 一 
种 便于 同事 重用 的 方式 共享 自己 的 库 。 

要 创建 一 个 包 , 需要 dotnet 命令 行 工具 ,该 工具 作为 .NET Core 
SDK 的 一 部 分 安装 。 


1. 添加 包 的 元 数据 
要 构建 NuGet 包 ， 需 要 指定 一 些 元 数据 : 作者 的 详细 信息 ， 包 


的 名 称 和 版 本 , 项 目的 各 种 URL 以 及 包 所 需 的 依赖 关系 列表 。 元 数 
据 直接 添加 到 .csproj 文件 中 ， 如 代码 清单 5-2 所 示 。 


代码 清单 5-2: webapplication.csproj 的 元 数据 


<Project Sdk="Microsoft .NET.Sdk"> 


<PropertyGroup> 
<TargetFramework>netcoreapp2.0</TargetFramework> 
<PackageId>Wrox.Book</PackageId> 
<PackageVersion>1.0.0</PackageVersion> 
<Authors>Simone Chiaretta</Authors> 
<Description>Show the title of the book</Description> 
<PackageReleaseNotes>First release</PackageReleaseNotes> 
<Copyright>Copyright 2017 (c) Wrox</Copyright> 
<PackageTags>book title wrox</PackageTags> 
<PackageProjectUrl>http://example.com/Wrox.Book/< 
/PackageProjectUr1> 
<PackageIconUrl>http://example.com/Wrox.Book/32x32icon. 
png</PackageIconUrl> 
<PackageLicenseUrl>http://example.com/Wrox.Book/ 
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mylicense.html</PackageLicenseUrl> 
</PropertyGroup> 


</Project> 


2. 创建 软件 包 


设置 完 所 有 元 数据 后 , 只 需要 转 到 项 目的 根 文件 夹 ( 即 .csproj 文 
件 所 在 的 位 置 ), 然后 输入 dotnet pack -c Release。 此 命令 将 收集 .csproj 
文件 中 的 所 有 依赖 关系 项 和 元 数据 ， 将 它们 复制 到 NuSpec(NuGet 
定义 文件 ) 文 件 中 ,为 所 有 支持 的 框架 生成 项 目 ， 并 将 所 有 内 容 打包 
保存 在 bin/Release( 或 bin/Debug) 中 的 NuGet 包 文件 中 。 

接 下 来 ， 如 果 使 用 NuGet Package Explorer(NuGet 包 浏 览 器 ) 打 开 
刚才 创建 的 包 ， 即 可 看 到 包 中 包含 的 所 有 属性 和 文件 (如 图 5-7 所 示 )。 


® NuGet Package Explorer - Wrox.Book.1.0.0 一 口 x 
File Edit View Content Tools Help 


e metadata 
HH 4 尝 b 
4 netcoreapp2.0 (NETCoreApp,Version=v2.0) 
WroxLibrary.dll 


1d: Wrox.Book 

Version: 1.0.0 

Authors: Simone Chiaretta 
Owners: Simone Chiaretta 
Tags: book title wrox 
View License Terms 
Package Information 
Copyright: 

Copyright 2017 (c) Wrox 
Description: 

Show the title of the book 
Release notes: 


First release 


Dependencies: 


-NETCoreApp,Version=v2.0 
No Dependencies 


5-7 NuGet Package Explorer 
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3. 将 包 发 布 到 NuGet.org Gallery 


如 果 希 望 将 包 发 布 到 一 个 内 部 存储 库 ， 可 以 将 该 文件 复制 到 该 
文件 夹 (或 使 用 自己 的 方法 )， 但 是 如 果 和 希望 该 包 可 供 .NET 社区 中 的 
任何 人 使 用 ， 则 必须 将 其 发 布 到 官方 存储 库 NuGet.org Gallery 中 。 
为 了 实现 这 一 点 ， 需 要 执行 两 步 操作 : 

e 下 载 NuGet 命令 行 实用 程序 (也 可 以 在 Package Manager 

Console 中 ， 使 用 Install-Package NuGet.CommandLine 命令 
下 载 该 实用 程序 )。 

e 在 NuGetorg Gallery 中 创建 一 个 账户 。 

完成 以 上 两 步 后 ， 需 要 注册 一 个 用 于 将 软件 包 与 账户 关联 的 
API 密 钥 : 

nuget setApiKey 你 的 API 密 钥 

然后 发 布 软件 包 : 


nuget push 你 的 软件 包 名 .nupkg 


5.3 NPM(Node.js 包 管 理 器 ) 


NPM 即 Nodejs 包 管 理 器 。 在 ASPNET Core 前 端 开 发 环境 中 ， 
NPM 主要 用 于 安装 开发 工具 和 实用 程序 。 


5.3.1 安装 NPM 

如 果 使 用 的 是 Visual Studio 2017， 则 可 能 已 经 在 计算 机 上 安装 
了 NPM( 在 VS2017 安装 程序 中 有 一 个 安装 Node.js 工具 的 选项 )。 要 
检查 它 是 否 已 安装 ， 可 在 命令 提示 符 中 输入 npm -Vv。 如 果 显 示 一 个 
版 本 号 (例如 4.1.1)， 则 NPM 已 经 安装 ， 可 以 跳 到 下 一 节 。 否 则 ， 
请 继续 阅读 下 文 。 

最 好 的 方法 是 通过 Nodejjs 安装 程序 安装 NPM。Node.js 最 近 更 
改 了 其 版 本 号 和 发 布 策略 ， 现 在 它们 提供 了 两 个 通道 
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e LTS(Long-Term Support， 长 期 支持 ) 版 本 在 生产 环境 中 具备 
支持 服务 ， 每 年 都 会 发 布 一 个 重要 版 本 ， 并 且 有 一 年 半 的 额 
外 维护 期 。 

e 稳定 版 本 是 最 新 的 稳定 版 本 ， 没 有 生产 环境 支持 服务 ， 但 发 
布 更 频繁 每 六 个 月 发 布 一 次 主要 版 本 )。 

对 本 书 而 言 ， 最 新 的 LTS 已 经 能 够 满足 使 用 需要 。 

安装 Node.js 后 ， 请 确保 使 用 npm install npm -g 进行 升级 ， 以 

获得 最 新 版 本 的 NPM。 


5.3.2 ”NPM 的 用 法 

可 通过 两 种 方式 来 安装 NPM 软件 包 。 可 直接 使 用 命令 行 工具 ， 
如 果 在 Visual Studio 中 ， 也 可 以 编辑 package.json 文件 ， 安 装 过 程 
将 如 同安 装 NuGet 包 一 样 自动 进行 。 

1. 使 用 NPM 命令 行 


NPM 命令 行 是 对 NPM 所 有 特性 的 主要 访问 方式 。 其 中 最 重要 
的 命令 是 : 

e npm install 将 还 原 package.json 文件 中 指定 的 包 。 
npm install <package-name> 安 装 命令 中 指定 的 软件 包 。 
npm init 可 帮助 创建 一 个 初始 的 packagejson 文件 ， 其 中 包 

e npm update 将 把 依赖 关系 更 新 为 最 新 版 本 。 

Install 命令 有 几 个 应 该 了 解 的 开关 选项 。 第 一 个 是 -g， 它 用 于 
将 软件 包 作为 一 个 全 局 (globaD) 包 安装 。 该 选项 主要 用 于 使 用 Nodejs 
构建 的 命令 行 工具 ， 如 NPM 本 身 或 Bower。 

另外 两 个 选项 --save( 也 可 使 用 -S) 和 --save-dev( 也 可 使 用 -D)， 将 
把 安装 的 软件 包 保 存在 package.json 文件 中 ， 从 而 不 必 手 动 更 新 该 
软件 包 。 第 一 个 选项 将 把 该 软件 包 保 存 为 一 个 应 用 程序 依赖 项 ， 而 
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后 者 将 其 保存 为 一 个 开发 依赖 项 。 对 于 ASPNET Core 项 目 环境 ， 
NPM 仅 用 于 工具 ， 而 不 用 于 实际 应 用 程序 本 身 ， 因 此 仅 使 用 
--Save-dev 开关 。 

在 默认 ASPNET Core 应 用 程序 中 添加 NPM( 例 如 启用 gulp 文 
持 ) 时 ， 随 附 的 一 个 packagejson 示例 如 代码 清单 5-3 所 示 。 可 以 看 
出 ， 只 有 devDependencies 部 分 包含 软件 包 。 在 本 例 中 ， 它 们 是 任 
务 运行 器 gulp 以 及 它 的 一 些 任 务 。 


代码 清单 5-3: Package.json 


{ 


"name": "app", 
"yersion™”s "1.0.0"; 
"private": true, 
"devDependencies": { 
Nol PN 
Me 
"gulp=concat®s "2.6601"; 
qlp=tonmin": “Ag 7 


"oulp=htnlinin™: "A300 
"alp=ugliEy ss "M2 00 
"merge-stream": "^1.0.1" 
} 
} 


2. 在 Visual Studio 中 使 用 NPM 


虽然 没有 类 似 NuGet 的 Package Manager 图 形 界面 ， 但 Visual 
Studio 对 NPM 仍然 有 着 良好 的 支持 。 

可 在 Visual Studio 中 直接 编辑 package.json 文件 ,并 且 与 NuGet 
一 样 ， 可 以 自动 完成 软件 包 名称 和 版 本 号 。 如 图 5-8 所 示 ， 将 鼠标 
悬 停 在 包 名 上 时 ， 同 样 会 出 现 更 详细 的 工具 提示 。 也 可 以 通过 弹出 
式 菜 单 执行 一 些 基 本 操作 。 
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Schema: http://json.schemastore.org/package 
at 
2 "name": “app"， 
3 "version": "1.0.0", 
4 "private": true, 
5 日 "devDependencies": { 
6 二 
a 3 者 
8 " 
9 | 前 gulp 
16 "g Concatenates files 
> “8 Latest: 2.6.1 
12 m Author: Contra 
13 } License: MIT 
14 } Homepage: https://github.com/contra/gulp-concat#readme 


Schema: http://json.schemastore.org/package 


1 日 { 
2 "name": "app"， 
3 "version": "1.9.0"， 
4 "private": true, 
5 日 "devDependencies": { 
6 Wl a 

。 二 到 有 
d Open homepage in browser 1 9 到 
16 Update Package .9.6"， 
1] Uninstall Package 8.6"， 
12 merge=strean "1.0.1" 
13 1 
14 |, 
5 


5-8 用 于 package.json 的 IntelliSense 扩展 程序 
保存 该 文件 后 ，Visual Studio 将 立刻 启动 上 一 节 中 介绍 的 npm 
install 命令 ， 并 安装 软件 包 。 另 一 个 不 错 的 功能 是 Solution Explorer 
(解决 方案 资源 管理 器 ) 中 的 依赖 关系 树 ， 它 显示 了 包 以 及 它们 之 间 
的 依赖 关系 (如 图 5-9 所 示 )。 
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Solution Explorer | 
日 全 部 四- 气 避 四 £I= 
Search Solution Explorer (Ctrl+;) Pp- 


a 


网 solution WebApplication3' (1 project) pnd 
4 团 WebApplication3 
全 Connected Services 
4 “Dependencies 


王 Analyzers 

©® NuGet 

部 SDK 

全 Bower 

本 npm 

着 是 del (3.0.0) 

-gulp (3.9.1) 

¥ gulp-concat (2.6.1) 
gE gulp-cssmin (0.2.0) 
gn gulp-htmlmin (3.0.0) 
-a gulp-uglify (3.0.0) 
i merge-stream (1.0.1) 
b £ Properties 

b DB wwwroot 


5-9 软件 包 树 


5.3.3 软件 包 的 安装 位 置 

NuGet 将 软件 包 安 装 在 当前 用 户 的 文件 夹 中 , 并 通过 其 在 .csproj 
项 目 文件 中 的 名 称 进行 引用 ; 与 NuGet 不 同 ，NPM 软件 包 直 接 安 
装 在 项 目的 名 为 node_modules 子 文件 夹 中 。 在 用 户 文件 夹 下 的 一 个 
用 于 安装 全 局 程序 包 的 本 地 缓存 中 , 也 保存 了 这 些 文件 的 一 份 副本 。 


hv vv 


z 


辟 吕 台 台 吕 冲 


5.4 Bower 

使 用 NuGet 可 添加 服务 器 端 依赖 项 , NPM 用 于 工具 , 而 Bower 
则 用 于 添加 客户 端 库 。 但 除了 这 一 显著 差异 之 外 ， 它 与 另外 两 个 包 
管理 器 的 工作 模式 基本 类 似 。 


Bower 的 命运 
Visual Studio 模板 附带 有 Bower 的 客户 端 引用 ， 因 此 本 章 介 绍 
了 它 的 使 用 方式 。 但 是 Bower 项 目的 维护 者 已 经 在 他 们 的 GitHub 
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存储 库 上 发 布 了 一 个 提示 ， 建 议 在 新 项 目 中 使 用 Yam( 一 个 第 三 方 
npm 客 户 端 ) 和 webpack( 在 第 3 章 中 提 到 并 在 第 6 章 中 详细 介绍 了 该 
工具 )。 


5.4.1 安装 Bower 

如 果 尚 未 使 用 Visual Studio 安装 Bower, 而 准备 在 Visual Studio 
Code 或 任何 其 他 IDE 中 使 用 它 , 则 此 时 应 安装 Bower。 该 操作 通过 
使 用 NPM 的 npm install bower -g 命令 完成 。 

为 使 用 Bower, 还 必须 安装 git。 这 是 Bower 和 其 他 系统 之 间 的 
一 个 重要 区 别 。 虽然 在 http://bower.io/search/ 处 还 有 一 个 用 于 列 出 软 
件 包 名 称 的 中 央 存 储 库 ， 但 该 库 并 不 存储 软件 包 ， 而 是 从 GitHub 
或 其 他 git 端点 直接 检索 这 些 软件 包 。 鉴 于 此 ， 它 需要 git 以 获取 实 
际 软件 包 。 
5.4.2 ”使 用 Bower 获取 软件 包 

类 似 于 NuGet 和 NPM， 可 以 通过 几 种 不 同 的 方式 安装 Bower 
软件 包 。 可 以 使 用 命令 行 工具 获取 软件 包 ， 该 工具 是 Bower 的 原生 
界面 ， 并 具有 最 完整 的 功能 集 。 如 果 在 Visual Studio 中 使 用 Bower， 
则 可 以 使 用 Package Manager 安装 软件 包 ， 也 可 以 直接 编辑 名 为 
bowerjson 的 依赖 关系 配置 文件 。 


1. 使 用 Bower 命令 行 


Bower 的 命令 行 工具 是 与 Bower 交互 的 最 灵活 的 标准 方式 。 它 
不 仅 可 以 安装 、 更 新 和 删除 软件 包 ， 还 可 以 在 中 央 存 储 库 上 注册 软 
件 包 。 也 可 以 使 用 本 地 缓存 执行 任何 类 型 的 包 管 理 操作 ， 而 不 必 通 
过 网 络 进行 ， 该 特性 在 飞机 上 抒 救 了 笔者 好 几 次 。 

Bower 的 命令 格式 基本 与 NPM 相同 : 

e@ bower install 将 安装 bower.json 文件 中 定义 的 所 有 软件 包 。 
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e@ bower install < 包 和 多 > 将 安装 指定 的 软件 包 。 其 中 包 名 可 以 是 
一 个 已 注册 的 软件 包 、 一 个 URL 或 一 个 git( 或 svn) 端 点 。 

e@ bower update 将 更 新 已 安装 的 软件 包 。 

e@ bower uninstall < 名 和 随 将 卸载 指定 的 软件 包 。 

e@ bower init 将 创建 一 个 新 的 bowerjson 文件 。 

与 NPM 中 相同 的 是 ， 在 Bower 中 也 可 以 通过 指定 --save 选项 


将 一 个 软件 包 自 动 加 入 bowerjson 文件 以 节约 时 间 。 


接 安装 它们 。 这 与 NuGet 完全 相同 , 只 是 列 出 的 是 Bower 软件 包 ( 如 
图 5-10)。 可 以 通过 右 击 Solution Explorer 中 的 项 目 根 目 录 ， 并 选择 
Manage Bower Packages 菜单 项 打开 此 窗口 。 

EESSESEE - 
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2. 在 Visual Studio 中 使 用 Bower Package Manager 图 形 界面 


如 果 使 用 的 是 Visual Studio， 则 可 以 搜索 包 并 使 用 包 管 理 器 直 


Manage Bower Packages: 'WebApplication1' Project 
Browse Installed Update Available 


Search (Ctri+E) x DD ndude Prerelease 


四 bootstrap 


Uninstall Update v40.0-alpha6 ~ 


Options 
(~ jQuery Save changes to bowerjson 
GD Distribution repo for jQuery Core releases 
Description 
加 moment The most popular front-end framework for developing responsive, mobile 
Parse, validate, manipulate, and display dates in javas.. first projects on the web. 
Author(s): twbs 
由 License: MIT 
A JavaScript visualization library for HTML and SVG Stars: 105969 


Project Homepage: http://getbootstrap.com 
(WY fontawesome 本 


图 5-10 Bower Package Manager 
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3. 编辑 bower.json 文件 


与 其 他 包 管理 器 一 样 ， 手 动 编辑 并 保存 定义 文件 将 触发 自动 安 
装 。 此 时 Visual Studio 将 启动 bower install 命令 。 

在 Bower 中 ,同样 IntelliSense 将 帮助 自动 完成 软件 包 名 称 和 版 本 。 

bowerjson 文件 的 格式 类 似 于 NPM 的 package.json， 如 代码 清 
单 5-4 的 默认 ASPNET Core 项 目 配 置 文件 所 示 。 


代码 清单 5-4: bowerjson 


{ 
"name": "asp.net", 
"private": true, 
"dependencies": { 
"bootestrap”: "3.336"; 
njdliory ss P20™y 
"jquery-validation": "1.14.0", 
"jquery-validation-unobtrusive": "3.2.6" 
} 
} 


5.4.3 ”软件 包 的 安装 位 置 

了 解 NuGet 和 NPM 软件 包 的 确切 位 置 并 不 重要 ， 因 为 它们 是 
通过 工具 自动 找到 的 。 但 是 , 了 解 Bower 软件 包 的 位 置 则 非常 重要 ， 
因为 它们 通常 是 必须 手动 包含 或 链接 到 Web 应 用 程序 的 JavaScript 
或 CSS 文件。 

通常 ， 软 件 包 安装 在 名 为 bower_components 的 子 文件 夹 中 , 但 
考虑 到 ASPNET Core 应 用 程序 的 行为 方式 从 ASPNET Core 项 目 
内 安装 的 Bower 软件 包 的 默认 位 置 是 wwwroot/lib。 由 于 ASPNET 
Core 应 用 程序 的 根 目录 是 wwwroot 文件 夹 ， 因 此 所 有 包 都 可 在 libs 
文件 夹 中 使 用 。 例 如 ，bootstrap 包 将 使 用 该 引用 方式 链接 : 


<link href="lib/bootstrap/dist/css/bootstrap.css" rel= 
"stylesheet"/>. 


这 可 能 不 是 最 好 的 方法 ， 因 为 Bower 包 是 与 git 存储 库 一 起 下 
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载 的 , 后 者 包括 文档 、 示 例 ， 有 时 还 包括 构建 用 文件 (如 Less 或 Sass 
脚本 )。 部 署 网 站 时 ， 可 能 不 希望 将 所 有 这 些 文件 纳入 生产 用 应 用 程 
序 中 。 这 种 情况 下 ， 可 能 需要 删除 .bowerrc 文件 (其 中 定义 了 软件 
包 的 下 载 位 置 )， 以 将 软件 包 再 次 下 载 到 bower_components。 然 后 
可 以 手动 或 通过 构建 过 程 , 仅 将 需要 的 文件 移动 到 wwwroot/lib 文 
件 夹 中 。 


5.4.4 创建 自己 的 软件 包 
在 需要 共享 JavaScript 或 CSS 库 时 ， 并 不 需要 太 多 工作 量 。 实 
际 上 ， 如 果 只 是 希望 在 公司 内 共享 库 文 件 ， 甚 至 是 不 必 在 存储 库 中 
注册 的 前 提 下 与 全 世界 共享 库 文件 , 只 要 已 经 有 了 bowerjson 文件 ， 
就 不 需要 做 任何 事情 。 
如 果 希 望 在 公共 存储 库 中 注册 软件 包 ， 则 还 需要 做 一 些 工作 : 
e 推荐 加 入 其 他 一 些 元 数据 。 可 使 用 description、moduleType 
来 指定 库 与 应 用 程序 的 交互 方式 , 使 用 main 列 出 库 的 入 口 点 
(必须 包含 在 HTML 文件 中 的 入 口 点 )， 使 用 ignore 列 出 git 
存储 库 中 的 在 安装 软件 包 时 不 需要 复制 的 文件 夹 和 文件 。 
e 软件 包 必 须 存 储 在 git 存储 库 中 ， 并 且 必 须 可 公开 访问 。 
e@ 版 本 必须 用 git 标签 进行 标记 ， 命 名 遵循 semver(Semantic 
Versioning， 语 义 版 本 ) 模 式 (例如 v1.0.0-beta)。 
满足 这 些 前 提 条 件 后 ， 就 可 以 通过 调用 以 下 命令 在 官方 存储 库 
中 注册 该 包 : 


bower register < 包 名 > <git 端点 > 


5.5 本章 小 结 


从 大 一 统 框架 方法 转向 小 型 、 专 用 库 方法 需要 解决 查找 、 安 装 
和 管理 依赖 关系 的 问题 。 包 管理 器 非常 有 效 地 解决 了 这 个 问题 。 
在 本 章 中 ， 学 习 了 ASPNET Core 应 用 程序 中 使 用 的 三 种 类 型 
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的 包 : 用 于 .NET 库 的 NuGet， 用 于 开发 工具 的 NPM， 以 及 用 于 客 
户 端 依赖 项 的 Bower。 

除了 NuGet 之 外 ， 其 他 两 种 都 不 是 微软 生态 系统 的 “原生 ” 产 
品 。 它 们 被 集成 到 Visual Studio 中 ， 这 使 得 不 习惯 命令 行 工具 的 开 
发 者 也 可 以 轻松 使 用 它们 。 

最 后 , 还 介绍 了 如 何 简单 地 使 用 包 管 理 器 在 开发 者 社区 (或 仅 在 
组 织 内 ) 共 享 自 己 开发 的 库 。 
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使 用 gulp 和 webpack 构建 
应 用 程序 


本 章 主要 内 容 : 

e 构建 自动 化 系统 的 作用 
e@ webpack 介绍 

e gulp 深度 介绍 

e Visual Studio 2017 如 何 与 gulp 和 构建 系统 集成 


构建 /生成 (build) 系 统 在 服务 器 端 软件 开发 业界 已 有 多 年 的 应 
用 历史 ， 从 用 于 编译 C/C++ 代码 的 make 文件 和 20 世纪 80 年 代 和 
90 年 代 的 简单 批 处 理 文件 开始 , 随 着 2000 年 初 Java 的 Ant 的 出 现 ， 
逐渐 发 展 为 基于 任务 的 系统 。 并 且 随 着 Ant\NAnt 和 稍 后 的 MSBuild 
的 诞生 ， 最 终 将 基于 任务 的 构建 自动 化 系统 带 入 .NET 中 。 
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就 在 不 久 前 ， 前 端 开发 还 不 需要 像 服 务 器 端 开发 那么 多 构建 步 
又 ， 但 随 着 基于 JavaScript 的 应 用 程序 复杂 性 的 增加 ， 前 端 专用 的 
构建 系统 也 开始 出 现 。 

本 章 涵 盖 gulp 和 webpack， 它 们 是 众多 用 于 前 端 开发 的 构建 自 
动 化 系统 中 的 两 种 。 本 章 还 介绍 Visual Studio 2017 的 一 些 能 使 这 两 
种 系统 更 易 用 ， 并 更 紧密 地 与 IDE 集成 的 特性 。 

在 接触 这 些 工 具 的 实际 使 用 前 ， 需 要 首先 了 解 前 端 构建 环境 中 
执行 的 典型 操作 。 


本 章 代 码 下 载 


本 章 的 相关 代码 可 通过 网 站 www.wrox.com 下 载 。 搜 索 该 书 的 
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ISBN(978-1-119-18131-6)， 可 在 第 6 章 的 下 载 部 分 找到 对 应 代码 。 


6.1 前 端 构建 系统 的 作用 


在 服务 器 端的 编译 语言 环境 中 ， 构 建 系统 用 于 将 代码 编译 为 二 
进 制 文件 、 运 行 测试 、 计 算 度 量 标准 ， 以 及 执行 从 开发 到 产品 安装 
阶段 的 配置 文件 转换 。 其 他 典型 操作 包括 四 处 移动 文件 和 创建 发 行 
文件 。 

前 端 构 建 系统 的 使 用 原因 与 服务 器 端 构 建 系 统 的 使 用 原因 有 
些 类 似 ， 因 为 即使 是 前 端 开 发 ， 也 需要 将 代码 文件 “编译 ”为 “二 
进 制 文件 ”( 例 如 从 Less 或 Sass 编译 为 CSS， 或 从 TypeScript 编译 
为 JavaScript)， 或 者 运行 JavaScript 测试 套件 或 度量 工具 包 ( 例 如 
JSLinb。 但 是 , 前 端 开发 还 需要 执行 一 些 专门 针对 JavaScript 和 CSS 
的 开发 任务 ， 并 且 不 仅仅 需要 在 最 终 发 布 期 间 执 行 这 些 任务 ， 还 需 
要 在 开发 阶段 执行 它们 。 此 类 任务 的 一 个 例子 是 自动 包含 对 Bower 
文件 的 引用 。 另 一 个 例子 是 精简 和 合并 JavaScript 及 CSS 文件 ， 以 
减少 客户 下 载 的 文件 的 大 小 和 数量 。 

本 章 其 余部 分 将 介绍 如 何 执行 一 些 最 常见 的 任务 。 将 展示 如 何 
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执行 以 下 任务 : 

e 自动 包含 对 Bower 包 的 引用 。 

e 将 Sass 文件 编译 为 CSS。 

@ 将 TypeScript 编译 为 JavaScript。 

e 合并 和 精简 JavaScript 和 CSS 文件 。 

e 运行 JSLint 以 检测 JavaScript 问题 。 

e 在 检测 到 文件 中 的 更 改 时 ， 执 行 任务 并 且 自 动 重新 加 载 浏 

览 器 。 

用 来 展示 如 何 执 行 这 些 任务 的 工具 是 gulp, 因为 它 是 .NET 社区 
最 倾向 使 用 的 工具 。 本 章 6.3 节 还 对 webpack 进行 简单 介绍 ， 第 3 
章 中 已 经 简要 提 到 过 该 工具 ， 因 为 它 被 Angular Command 
Line(Angular 命令 行 ) 工 具 所 使 用 ， 且 在 前 端 开发 社区 中 产生 了 很 大 
的 影响 力 。 


6.2 gulp 深度 介绍 

第 一 种 JavaScript 任务 运行 程序 (task runner) 是 Grunt, 尽管 其 用 
户 群 较 大 ， 但 由 于 gulp 的 出 现 ， 其 采用 率 不 断 下 降 ， 开 发 gulp 的 
目的 是 为 了 克服 Grunt 中 存在 的 问题 。 这 两 种 工具 的 实现 途径 差距 
非常 大 。gulp 是 基于 代码 ， 而 非 如 Grunt 一 样 基 于 配置 。gulp 构建 
过 程 的 各 个 步骤 由 Node.js 流连 接 在 一 起 ， 其 中 一 个 步骤 的 输出 作 
为 下 一 个 步骤 的 输入 。 这 就 是 将 它 称 为 “ 流 式 构建 系统 ”的 原因 。 
6.2.1 gulp 入 门 

必须 通过 npm 命令 安装 gulp。 首 先 安装 命令 行 工具 : 


npm install --global gulp-cli 


然后 ， 在 项 目的 文件 夹 内 ， 再 次 利用 npm 命令 安装 gulp 包 本 身 : 


npm install gulp --save-dev 
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6.2.2 gulpfileJjs 文件 

如 前 所 述 ， 使 用 gulp 进行 自动 化 的 构建 是 利用 代码 ， 而 非 通过 
配置 一 系列 任务 完成 的 。 因此 , gulpfilejs 看 起 来 像 一 个 标准 Nodejs 
代码 文件 。 

gulpfilejs 文件 的 开头 是 初始 化 gulp 库 本 身 以 及 将 在 构建 脚本 
中 使 用 的 所 有 插件 和 模块 。 该 操作 是 通过 使 用 Nodejs 的 require0) 函 
数 完成 的 。 

var gulp = require("gulp")， 

del = require ("del"), 

concat = require ("gulp-concat"), 
cssmin = require ("gulp-cssmin"), 
uglify = require ("gulp-uglify"); 

加 载 所 有 外 部 库 后 ， 就 可 以 使 用 gulp 的 API 来 开发 构建 过 程 。 
gulp API 中 只 有 四 种 顶层 方法 。 其 中 两 种 用 于 定义 任务 的 入 口 点 ， 
另 两 种 用 于 表示 输入 文件 夹 和 输出 文件 夹 。 

task 方法 定义 一 个 gulp 任务 ， 其 参数 如 下 : 

e name， 该 任务 的 名 称 。 

e deps, 一 个 可 选 的 数组 ， 其 中 包含 该 任务 所 依赖 的 (并 且 必 须 

在 该 任务 运行 之 前 完成 的 ) 其 他 任务 。 

e fn， 要 执行 的 功能 。 

该 方法 的 调用 示例 如 下 : 

gulp.task ("dist", ["build"], function(){ 


//do something after the build task has run 
1); 


如 果 局 动 gulp 过 程 而 未 指定 任何 任务 ， 将 执行 名 为 default 的 
任务 。 


gulp.task ("default", ["dist", "build"]) 


需要 着 重 提 及 的 一 点 是 , 为 获得 最 大 并 发 性 , 将 执行 所 有 任务 ， 
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这 意味 着 所 有 任务 将 并 行 启动 。 如 果 需 要 以 特定 顺序 执行 任务 ， 除 
了 使 用 参数 deps 指定 依赖 关系 外 ,任务 的 函数 还 必须 具有 “提示 ”， 
在 其 作业 完成 时 告知 系统 。 这 可 通过 接受 回调 函数 、 返 回 一 个 流 对 
象 或 返回 一 个 promise 对 象 实现 。 


gulp.watch() 


watch 方法 用 于 在 指定 文件 更 改 时 运行 任务 或 函数 。 其 参数 如 下 : 

e glob: 一 个 字符 串 或 一 个 字符 串 数组 ， 代 表 所 监视 的 文件 ， 
字符 串 中 可 使 用 命令 行 工 具 中 通常 使 用 的 典型 通配符 (例如 
scripts/*.]s)。 

e opts: 用 于 配置 监视 进程 的 选项 ， 例 如 用 于 指定 变更 检查 频 
率 的 interval， 或 用 于 指定 在 多 个 变更 连续 、 快 速 发 生 时 ， 
延迟 执行 的 debounceDelay。 

e tasks: 要 执行 的 任务 数组 。 

e cb: 要 执行 的 回调 函数 。 

tasks 和 cb 两 个 参数 不 能 同时 指定 。 因 此 ， 存 在 两 种 watch 方 

法 的 变种 。 其 中 之 一 是 指定 要 运行 的 任务 : 


gulp.watch ("js/*.js", ["jshint"]) 


另 一 个 版 本 是 执行 一 个 函数 : 


gulp.watch('js/*.js', function(event) { 
console.log('File ' + event.path + ' was ' + event.type); 


hs 

gulp.src() 

该 方法 通常 是 各 个 任务 的 起 点 。 它 会 返回 一 个 文件 流 (因此 称 为 
“ 流 式 构建 系统 ”)， 可 将 该 文件 流传 送 到 组 成 任务 的 各 种 插件 中 。 
如 果 希 望 将 任务 作为 另 一 个 任务 的 依赖 项 ， 则 该 流 必 须 是 由 前 者 的 
函数 返回 的 。 
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return gulp.src("js/*.js") 
.Concat(。..) 
-pipe (uglify ()) 
-pipe (gulp.dest ("lib")); 


此 方法 用 作 pipe 方法 内 的 函数 。 它 接受 流 并 将 文件 写 入 指定 的 
文件 夹 。 

.pipe (gulp.dest ("1ib")); 
6.2.3 ”典型 gulp 构建 文件 

接 下 来 将 介绍 如 何 通过 实现 一 个 典型 的 构建 文件 ， 将 所 有 这 些 
信息 付 诸 实践 。 这 需要 执行 几 个 步骤 ， 但 核心 方面 包括 以 下 内 容 ; 

(1) 检查 JavaScript 文件 是 否 存在 可 能 的 错误 。 

(2) JavaScript 文件 和 CSS 文件 被 连接 成 一 个 文件 。 

(3) 连接 后 的 JavaScript 文件 被 精简 。 

示例 文件 结构 如 图 6-1 所 示 。 


4 lib 


b node_modules 
4 STC 
4 CSS 
buttons.css 
main.css 
4 scripts 
athletesFactoryjs 
averageFactoryjs 


raceControllerjs 


gruntfile.js 


package.json 


readme.md 


6-1 项 目的 文件 结构 
首先 ， 需要 安装 插件 ， 通常 利用 npm install ..…. --save-dev 形式 : 
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gulp-concat 用 于 将 多 个 文件 连接 成 一 个 。 

gulp-uglify 用 于 精简 JavaScript 文件 。 

gulp-cssmin 用 于 精简 CSS 文件 。 

e del 是 一 个 标准 的 深度 删除 npm 包 。 

在 构建 过 程 中 ， 首 先 要 删除 旧 工 件 ， 然 后 完成 其 余 工作 。 


gulp.task ("clean", function() { 
return del("lib/*"); 
]) 


下 一 步 是 脚本 和 CSS 文件 的 连接 和 精简 。 
使 用 以 下 任务 处 理 脚本 : 


gulp.task ("minjs", ["clean"], function(){ 
return gulp.src("src/scripts/*.js") 
.pipe (concat ("all .min.js")) 
-pipe (uglify()) 
.Pipe (gulp.dest ("lib")); 
3 


多 个 JavaScript 文件 被 读 入 内 存 , 并 被 连接 为 一 个 all.minjs 文件 
( 仍 在 内 存 中 )。 接 下 来 这 个 文件 被 精简 并 最 终 保存 到 lib 文件 夹 中 。 
只 需要 使 用 cssmin 替换 上 面 脚本 中 的 usglify,， 即 可 精简 CSS 文 
件 (gulp 有 一 个 单独 的 插件 完成 该 功能 )。 
gulp.task ("mincss", ["clean"], function(){ 
return gulp.src("src/css/*.css") 
.pipe (concat ("styles.css")) 
-pipe(cssmin()) 
.Pipe(gulp.dest ("lib")); 
1); 
包含 所 有 require 语句 和 默认 任务 定义 的 gulpfilejs 文件 如 代码 
清单 6-1 所 示 。 


代码 清单 6-1: gulpfile.js 


var gulp = require('gulp'), 
del = require('del'), 
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concat = require('gulp-concat'), 

cssmin = require('gulp-cssmin'), 

uglify = require('gulp-uglify'); 
gulp.task ("clean", function() { 


return dell("“lib/*"); 
1); 


gulp.task ("minjs", ["clean"], function(){ 
return gulp.src("src/scripts/*.js") 
-pipe (concat ("all .min.js")) 
-pipe(uglify()) 
-pipe(gulp.-dest("1ib")); 
]) 


gulp.task ("mincss", ["clean"], function(){ 
return gulp.srec("sre/css/*.css") 
.pipe (concat ("styles.css")) 
-pipe (cssmin()) 
.pipe (gulp.dest ("lib")); 
}); 


gulp.task ("default", ["mincss","minjs"]); 


6.2.4 更 多 gulp 技巧 

利用 gulp 还 能 完成 更 多 工作 ， 而 不 仅 是 精简 和 合并 文件 。gulp 
插件 存储 库 中 具有 超过 2800 个 插件 。 最 重要 的 是 ，gulp 只 是 一 个 
标准 Nodejs 文件 ， 因 此 可 使 用 任何 npm 包 。 

下 文 介绍 一 些 用 于 完成 其 他 常见 任务 的 技巧 。 


1. 利用 包 的 名 称 命名 输出 文件 


可 读 取 packagejson 文件 的 内 容 ， 并 将 读 出 的 值 重用 于 gulp。 
因为 该 文件 是 一 个 JSON 对 象 , 所 以 可 使 用 require 方法 读 取 并 加 载 
到 内 存 中 : 


Var pkg = require('./package.json') 


然后 ， 可 以 采用 如 下 名 称 来 命名 连接 后 的 脚本 文件 : 


pkg.name+"-"+pkg.version+t".min.js" 
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现在 JavaScript 精简 任务 的 形式 如 下 : 
Var pkg = require('./package.json'); 


gulp.task ("minjs", ["clean", "lint"], function(){ 
return gulp.src("src/scripts/*.js") 
-Pipe (concat (pkg .name+"-"+pkg.version+".min.js")) 
-Pipe (uglify()) 
-pipe (gulp.dest ("lib")); 
]) 


2. 生成 Source Map 


精简 操作 能 够 减少 脚本 大 小 ， 但 该 操作 将 导致 无 法 进行 代码 调 
试 。 此 问题 的 一 个 解决 方法 是 创建 Source Map( 源 代码 映射 表 )， 
JavaScript 调试 工具 可 以 使 用 它 将 精简 后 的 代码 映射 到 原始 代码 。 

为 使 用 gulp 生成 源 代码 映射 表 ， 需 要 安装 gulp-sourcemaps 插 
件 。 该 插件 最 简单 的 使 用 方法 是 : 在 任何 操作 开始 之 前 调用 initO 
方法 ， 读 取 原 始 文件 ， 最 后 调用 write0 方 法 将 映射 表 写 入 磁盘 。 


return gulp.src("src/scripts/*.js") 
.pipe (sourcemaps .init()) 
.pipe (concat (pkg .name+"-"+pkg.version+".min.js")) 
-pipe (uglify()) 
.Pipe (sourcemaps .write()) 
-pipe (gulp.dest ("lib")); 


如 果 调 用 write0 方 法 时 不 带 参 数 ， 映 射 表 将 被 嵌入 保存 到 目标 
文件 中 ， 但 如 果 向 该 方法 传递 一 个 相对 于 目标 文件 的 路 径 ， 如 
Sourcemaps.write(.)， 则 映射 表 将 保存 为 一 个 独立 文件 ， 其 文件 名 为 
目标 名 加 上 .map 扩展 名 。 


注意 
在 init 和 write 之 间 使 用 的 插件 必须 支持 gulp-sourcemaps, 如 本 
书 示例 中 所 使 用 的 插件 : uglify、concat 和 cssmin。 
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3. 使 用 JSHint 检查 JavaScript 脚本 


也 可 通过 在 gulp 中 使 用 gulp-jshint 插件 来 运行 JSHint。 使 用 方 
法 很 简单 。 首 先 执 行 jshint(0 方 法 ， 然 后 将 结果 传递 给 jshint.reporter 
(REPORTER-NAME") 方 法 ， 以 在 控制 台中 打印 出 分 析 结 果 。 

市 面 上 存在 很 多 报告 器 (reporter)， 所 有 JSHint 报告 器 也 应 该 能 
与 该 插件 兼容 。 在 gulp-jshint 环境 中 应 用 的 最 流行 报告 器 是 该 插件 
附带 的 默认 报告 器 default 和 可 选 报告 器 jshint-stylish。 两 种 报告 器 
的 输出 结果 比较 如 图 6-2 所 示 。default 报告 器 位 于 上 方 ， 而 stylish 
报告 器 位 于 下 方 。 


国 CWINDOWS\system32\cmd.exe 口 


图 6-2 default 报告 器 和 stylish 报告 器 的 比较 
此 外 ， 如 果 在 存在 警告 或 错误 时 不 希望 任务 继续 进行 ， 则 可 以 
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使 用 fail 报告 器 停止 执行 构建 过 程 。 以 下 代码 片段 展示 了 一 个 运行 
JSHint、 打 印 报告 并 在 发 生 错 误 时 停止 执行 的 任务 。 


gulp.task ("lint", function() { 
return gulp.src("src/scripts/*.js") 


.pipe (jshint ()) 
-pipe (jshint.reporter('jshint-stylish')) 
-pipe(jshint.reporter('fail')); 

]) 7 


该 代码 会 停止 执行 所 有 依赖 lint 任务 的 任务 ， 如 图 6-3 所 示 。 


国 C\WINDOWS\system32\cmd.exe 


6-3 JSHint 出 错 后 停止 执行 
4. 文件 更 改 时 执行 任务 
gulp 中 有 一 个 watch 方法 ， 该 方法 在 文件 内 容 改 变 时 触发 任务 
的 执行 。 例 如 ， 如 果 希 望 在 每 次 JavaScript 文件 变更 时 运行 JSHint， 
则 可 以 创建 一 个 新 任务 ， 并 在 该 任务 中 调用 watch 方法 。 


gulp.task('watch', function() { 
gulp.watch('srce/scripts/*.js", [lint"]); 
}); 


然后 启动 gulp， 并 指定 执行 watch 任务 : gulp watch。 只 要 某 个 
JavaScript 文件 被 保存 在 scripts 文件 夹 中 ， 将 启动 JSHint 检查 过 程 。 
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5. 管理 Bower 依赖 关系 


Bower 将 所 有 依赖 关系 安装 在 项 目的 一 个 名 为 bower components 
子 文件 夹 中 。 如 第 5 章 所 述 , 将 这 些 依赖 关系 包含 在 HTML 文件 中 
的 简单 方法 是 直接 引用 Bower 文件 夹 中 的 组 件 。 这 样 做 在 开发 过 程 
中 可 能 没有 问题 ， 但 对 于 应 用 程序 部 署 而 言 ， 并 不 是 一 个 好 做 法 ， 
因为 Bower 的 包 基 本 上 就 是 它 的 git 存储 库 ， 因 而 其 中 包含 了 开发 
者 不 希望 在 生产 环境 中 使 用 的 很 多 文件 。 

一 种 更 好 的 做 法 是 仅 将 运行 应 用 程序 所 需 的 文件 复制 到 其 他 
文件 夹 。 这 可 人 工 完 成 ， 也 可 通过 gulp 自动 完成 。 

为 进一步 简化 操作 ， 有 一 个 名 为 main-bower-files 的 gulp 插件 ， 
该 插件 可 以 遍历 bowerjson 中 定义 的 所 有 依赖 关系 ， 对 于 每 一 个 依 
赖 关系 ， 取 出 由 包 的 开发 者 定义 的 主要 文件 。 这 些 文件 是 使 用 该 库 
所 需 的 文件 。 它 的 用 法 很 简单 : 只 需要 调用 该 插件 来 确定 任务 的 源 
文件 ， 并 将 它们 通过 管道 重 定向 到 目标 文件 夹 中 。 代 码 清单 6-2 将 
一 些 组 件 复制 到 dist/libs 文件 夹 中 。 

代码 清单 6-2: 利用 gulp 管理 Bower 组 件 


var gulp = require('gulp'); 
var mainBowerFiles = require('main-bower-files'); 


gulp.task ("default", function(){ 
return gulp.src (mainBowerFiles ()) 
.Pipe (gulp.dest ("dist/1ib")); 
1); 


警告 

并 非 所 有 Bower 包 都 能 正确 定义 其 主要 文件 。 例 如 ，Bootstrap 
将 一 个 .less 文件 包含 在 其 主要 文件 中 ， 但 不 包含 CSS 文件 或 字体 。 
这 种 情况 下 ， 可 在 bowerjson 文件 中 或 直接 在 gulp 任务 中 ， 重 载 
mainBowerFiles 返回 的 文件 。 


gulp.task ("default", function(){ 
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return gulp.src(mainBowerFiles({ 
overrides: { 
bootstrap: { 
main: [ 
'./dist/js/bootstrap.js', 
/dist/css/*.min.css', 
'./dist/fonts/*.*" 


} 
3 
.Pipe (gulp.dest ("dist/1ib")); 
Ha 


6. 直接 在 HTML 文件 中 替换 引用 


本 对 前 面 介绍 了 如 何 合并 和 精简 JavaScript 文件 与 CSS 文件 。 
如 果 还 能 更 新 HIML 文件 中 的 引用 岂 不 更 好 ? 该 功能 的 实现 得 益 
于 一 个 功能 非常 强大 的 插件 gulp-inject。 
该 插件 生成 一 个 引用 列表 , 并 将 其 插入 HTML 文件 中 一 个 由 特 
殊 注 释 限定 的 区 域 。 在 添加 新 引用 时 ， 它 会 删除 这 些 注释 之 间 的 所 
有 内 容 。 这 样 ，HTML 文件 的 开发 版 本 引用 的 是 独立 的 JavaScript 
文件 和 CSS 文件 ， 而 使 用 gulp 任务 生成 的 生产 版 本 引用 的 是 组 合 
和 精简 的 JavaScript 文件 和 CSS 文件 。 
下 面 将 介绍 该 技巧 的 实现 方式 。 首 先 ，HTML 文件 必须 包含 由 
注释 包围 的 脚本 。 
<!-- inject:js --> 
<script src="/scripts/athletesFactory.js"></script> 
<script src="/scripts/averageFactory.js"></script> 


<script src="/scripts/raceController.js"></script> 
<!-- endinject --> 


然后 在 gulp 任务 内 进行 精简 操作 ， 如 代码 清单 6-3 所 示 。 
代码 清单 6-3: 利用 gulp 替换 脚本 的 引用 


var gulp = require('gulp')， 
concat = require('gulp-concat'), 
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inject = require('gulp-inject'), 
cssmin = require('gulp-cssmin'), 
uglify = require('gulp-uglify'); 


var pkg = require('./package.json'); 
Var fileName = pkg.name+"-"+pkg.version+".min.js"; 


gulp.task ("minjs", function(){ 
return gulp.src("./src/scripts/*.js") 
-Pipe (concat (fileName)) 
-pipe (uglify()) 
.pipe (gulp.dest("./dist/1ib")); 
]) 


gulp.task ("mincss", function(){ 
return gulp.src("./src/css/*.css") 
.pipe (concat ("styles.css")) 
.Pipe (cssmin ()) 
.pipe (gulp.dest("./dist/1ib")); 
让 


gulp.task ("inject", ["minjs", "mincss"], function()f{ 
return gulp.src("./src/index.html") 
.Pipe (inject (gulp.src(["./dist/lib/*.js","./dist/1lib/*. 
css"]),{ignorePath: 'dist'})) 
.Pipe (gulp.dest ("./dist")); 
和 这 


gulp.task ("default", ["inject"]); 


在 代码 清单 6-3 中 ， 可 看 到 gulp-inject 插件 的 工作 方式 。 它 通 
过 管道 接收 HTML 文件 流 作 为 输入 , 并 使 用 指定 的 文件 引用 作为 参 
数 ， 输 出 修改 后 的 版 本 。 

任务 运行 后 , HTML 文 件 中 的 引用 将 改 为 复制 到 dist 文件 夹 中 
的 、 精 简 后 的 脚本 和 样式 。 


去 [= 一 iniectscss ==> 

<link rel="stylesheet" href="/lib/styles.css"> 

过 攻关 一 endinisct. ==> 

= injecotajs ==> 

<script src="/lib/gulp-inject-sample-0.0.1.min.js"></script> 
<!-- endinject --> 
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6.3 ”webpack 介绍 


webpack 是 模块 打包 器 (module bundler)， 可 以 加 载 JavaScript 
应 用 程序 的 所 有 依赖 关系 ， 并 将 它们 打包 在 一 起 ， 以 优化 浏览 器 的 
加 载 速 度 。 虽 然 严 格 来 说 ，webpack 并 不 是 一 个 任务 运行 程序 ， 但 
它 可 以 用 于 完成 gulp 所 执行 的 大 部 分 任务 ， 如 精简 、 捆 绑 和 检查 
dinting)。 让 我 们 看 看 它 的 工作 方式 。 


6.3.1 webpack 的 主要 概念 

相对 于 gulp，webpack 的 学 习 曲 线 稍 微 有 点 陡峭 ， 因 此 在 学 习 
示例 之 前 , 首先 需要 了 解 一 些 主要 概念 :入 口 点 (entry)、 输 出 (outpub、 
加 载 器 (loadeD 和 插件 .一切 都 始 于 应 用 程序 的 入 口 点 ,这 是 webpack 
开始 追踪 依赖 关系 树 之 处 。 流 程 的 终点 则 是 输出 ， 这 是 webpack 在 
完成 其 工作 后 保存 打包 文件 的 位 置 。 所 有 处 理工 作 都 位 于 入 口 和 输 
出 之 间 ， 由 加 载 器 和 插件 完成 。 

webpack 是 JavaScript 模 块 打包 器 ,这 意味 着 它 能 查找 JavaScript 
模块 及 其 依赖 关系 并 打包 它们 。 但 是 ，webpack 也 可 以 处 理 .css 文 
件 、Sass 文件 、TypeScript 文件 ， 甚 至 是 图 片 和 .html 文件 。 加 载 器 
用 于 “转换 ”可 由 webpack 处 理 的 模块 中 的 任何 类 型 文件 。 插 件 不 
是 用 于 单个 源 文件 ， 而 用 于 对 最 终 的 打包 输出 执行 通用 操作 。 

webpack 的 配置 存储 在 webpack.config.js 文件 中 。 

现在 介绍 如 何 使 用 webpack 执行 在 代码 清单 6-1 中 由 gulp 完成 
的 同样 工作 。 
6.3.2 ”应 用 webpack 

第 一 步 显 然 是 安装 webpack。 这 是 通过 NPM 完成 的 。 像 其 他 工 
有 具 一 样 , 它 可 以 全 局 安装 , 但 更 好 的 做 法 是 基于 每 个 项 目 独立 安装 ， 
以 避免 同一 台 计 算 机 上 不 同 项 目 之 间 的 版 本 冲突 。 

有 了 一 个 新 文件 夹 ， 且 在 该 文件 夹 中 建立 一 个 空 packagejson 文 
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件 后 ， 即 可 运行 npm install webpack --save-dev 命令 来 安装 webpack， 
并 将 它 添加 为 项 目的 开发 引用 项 (development reference)。 


1. 打包 JavaScript 


接 下 来 是 使 用 最 小 配置 创建 webpack.config.js 文件 ， 该 文件 指 
定 了 打包 的 入 口 文件 和 输出 文件 。 代 码 清 单 6-4 中 的 配置 文件 指示 
webpack 从 ./src/index.js 文件 开始 提取 依赖 关系 ， 并 将 打包 后 的 版 
本 存储 在 bundle.jjs 文件 中 。 仅 将 一 批文 件 置 于 同一 个 文件 夹 中 ， 
并 不 足以 实现 自动 化 提取 。 它 们 必须 使 用 ECMAScript 5 的 模块 
export/import 语法 互相 引用 。 代 码 清单 6-5 展示 了 该 例 中 使 用 的 两 
个 文件 如 何 链 接 在 一 起 。 

代码 清单 6-4: 简单 的 webpack 配置 文件 (webpack.config.js) 


var path = require('path'); 


module.exports = { 
entry: './src/index.js', 
output: { 


filename: 'bundle.js', 

path: path.resolve( dirname, 'dist') 
| } 
代码 清单 6-5: 示例 中 使 用 的 JavaScript 文件 
INDEX.JS 


import {greet} from './greeting.js'; 


function component () { 
Var element = document.createElement ('div'); 


element.innerHTML = greet ("readers"); 
element .classList.add('hello'); 


return element; 


} 
document .body.appendChild (component () ); 
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GREET.JS 


export function greet (who) { 
return "Hello "” + who; 


请 注意 import 和 export 的 用 法 ，import 用 于 导入 依赖 关系 ， 
export 用 于 输出 供 其 他 文件 使 用 的 函数 。 现 在 只 需要 运行 webpack 
而 不 需要 任何 额外 的 配置 ， 即 可 将 这 两 个 文件 合并 成 一 个 文件 。 

由 于 webpack 仅 安 装 在 项 目 本 地 ， 因 此 运行 它 有 两 种 方式 。 第 
一 种 方式 是 使 用 其 相对 路 径 .node_ modules/.bin/webpack。 这 是 通过 
npm 安装 时 所 有 可 执行 文件 的 存储 位 置 。 另 一 种 方式 是 使 用 npm 脚 
本 。 要 这 么 做 ， 只 需要 在 package.json 文件 中 添加 一 个 脚本 元 素 ， 
然后 输入 npm run build， 即 可 执行 webpack。 需 要 添加 的 代码 如 下 
所 示 。 

"scripts": { 


"build": "webpack" 
} 


2. 打包 样式 表 


为 向 打包 中 添加 样式 表 ， 必 须 欺骗 webpack， 使 其 认为 .css 文 
件 是 另 一 个 模块 ， 并 且 需 要 安装 和 配置 正确 的 模块 加 载 器 。 前 者 是 
通过 导入 .css 文件 来 完成 的 ， 就 像 它 是 另 一 个 JavaScript 模块 一 样 : 

import './style.css'; 

然后 ， 必 须 通过 npm 安装 样式 和 CSS 加 载 器 ， 并 在 webpack. 
configjs 文件 中 进行 配置 。 

安装 这 两 个 模块 的 命令 如 下 : 


npm install style-loader css-loader --save-dev 


添加 CSS 加 载 器 后 的 配置 文件 如 代码 清单 6-6 所 示 。 
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代码 清单 6-6: 具有 CSS 加 载 器 的 webpack.config.js 


Var path = require('path'); 


module.exports = { 


entry: 


output: 


'./src/index.js', 


和 


filename: 'bundle.js'v 


path: path.resolve( dirname, 'dist') 


}, 


module: 


{ 


rules: [ 


{ 


test: /\.css$/, 
use: [ 


'style-loader', 
'css-loader' 


代码 清单 6-6 展示 了 如 何在 一 个 module 属性 内 添加 加 载 器 。 每 
个 不 同 的 模块 加 载 器 都 需要 一 个 test 关键 字 ， 用 于 指定 何 时 使 用 加 
载 器 以 及 要 使 用 的 加 载 器 列表 。test 可 以 是 一 个 正则 表达 式 ， 其 中 包 
含 加 载 文件 的 扩展 名 ， 或 一 个 更 复杂 的 函数 。 

运行 webpack 后 ， 样 式 将 与 JavaScript 文件 打包 在 一 起 ， 并 在 
运行 时 注入 HIML 文件 的 头 部 。 如 果 希 望 在 HTML 文件 中 ， 从 样 
式 文件 自身 引用 样式 , 则 需要 使 用 extract-text-webpack-plugin 插件 。 
该 插件 的 配置 文件 如 代码 清单 6-7 所 示 。 


代码 清单 6-7: 使 用 extract-text-webpack-plugin 插件 的 webpack.configjs 


var path = require('path'); 


Const ExtractTextPlugin = require ("extract-text-webpack-plugin"); 


module.exports = { 


entry: 
output: 


/arc/indexr.js', 
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filename: 'bundle.js', 
path: path.resolve( dirname, 'dist') 


tests /\:css$/s 
use: ExtractTextPlugin.extract({ 
fallback: "style-loader", 
use: "css-loader" 
} 
] 
}, 
plugins: [ 
new ExtractTextPlugin("styles.css") 
] 
ks 
如 此 修改 后 ，CSS 文件 将 打包 到 一 个 文件 中 ， 而 非 注 入 HIML 


文件 的 标题 部 分 。 

3. 精简 和 添加 Source Map 

捆绑 完 文 件 后 ， 仍 然 需 要 精简 它们 。 这 是 通过 应 用 另 一 个 名 为 
UglifyJsPlugin 的 插件 完成 的 。 要 应 用 这 个 插件 ,在 将 其 导入 配置 文 
件 之 后 再 添加 到 插件 列表 即 可 。 

new webpack.optimize.UglifyJsPlugin() 

为 同时 给 JavaScript 文件 和 .css 文件 建立 Source map, 必须 在 配 
置 中 指定 另 一 个 名 为 devtool 的 参数 。 根 据 所 需 的 Source map 类 型 
(内 联 的 或 在 独立 文件 中 ) 及 要 求 的 准确 性 ， 该 参数 可 以 具有 许多 不 
同 的 值 .添加 Source Map 且 精 简 后 的 配置 文件 如 代码 清单 6-8 所 示 。 


代码 清单 6-8: 具有 Source Map 且 精 简 后 的 webpack.config.js 


var path = require('path'); 
const webpack = require('webpack'); 
const ExtractTextPlugin = require ("extract-text-webpack-plugin"); 
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module.exports = { 
Gntry: "s/src/index.js’, 
output: { 
filename: 'bundle.js', 
path: path.resolve( dirname, 'dist') 
}, 
devtool: "source-map", 
module: { 
rules: [ 
{ 
test: /\.css$/, 
use: ExtractTextPlugin.extract({ 
fallback: "style-loader", 
use: "css-loader" 
+ 
} 
] 
}, 
plugins: [ 
new ExtractTextPlugin("styles.css"), 
new webpack.optimize.UglifyJsPlugin({sourceMap:true}) 
] 


6.3.3 ”webpack 的 其 他 功能 

尽管 webpack 是 一 个 模块 打包 程序 ， 但 得 益 于 丰富 的 加 载 器 ， 
其 功能 不 仅 限 于 捆绑 JavaScript 文件 。 它 可 以 处 理 样式 (包括 Sass 或 
Less), 也 可 以 处 理 需要 某 种 转译 (transpiling) 的 脚本 文件 (如 TypeScript、 
CoffeScript 或 ECMAScript 2015)、 图 片 、 字 体 以 及 许多 其 他 类 型 的 
文件 。 另 外 ， 它 可 在 加 载 JavaScript 文件 时 运行 JSHint。 通 过 使 用 
一 些 插件 ， 它 可 以 自动 将 脚本 和 样式 标签 添加 到 HTML 文件 中 (使 
用 HtmlWebpackPlugin 插件 )， 可 以 实现 如 前 所 述 的 精简 捆绑 包 ， 还 
可 以 压缩 文件 等 。 

然而 ， 它 终究 是 一 个 模块 打包 程序 ， 因 此 并 不 具备 通用 任务 运 
行程 序 (例如 gulp) 的 灵活 性 ， 并 且 它 要 求 应 用 程序 以 模块 化 方式 编 
写 ， 而 实际 并 非 如 此 ， 在 不 使 用 最 新 的 JavaScript 框架 时 尤其 如 此 。 

但 是 ， 如 果 通 过 CLI 使 用 Angular， 则 不 必 执 行 任何 操作 即 可 
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自动 执行 webpack 编译 和 捆绑 操作 。 


6.4 Visual Studio 2017 和 构建 系统 


现在 你 已 经 了 解 了 gulp， 接 下 来 非常 重要 的 是 掌握 如 何 将 它 集 
成 到 Visual Studio 2017 中 。 


6.4.1 Bundler & Minifier 扩展 

微软 认识 到 开发 者 使 用 任务 运行 程序 主要 是 为 了 精简 和 打包 
文件 , 因此 ASPNET Core 项 目 模板 中 不 包括 gulpfile.js 文件 。 相反， 
它 包 括 bundleconfig.json 文件 ， 其 中 包含 Visual Studio 2017 的 一 项 
新 功能 :Bundler & Minifier。 Bundler&Minifier 通 过 提供 用 于 在 Visual 
Studio 开发 中 创建 打包 的 菜单 项 ， 简 化 管理 CSS 和 JavaScript 文件 
的 过 程 。 

通过 右 击 Project Explorer( 项 目 浏览 器 ) 中 的 文件 并 选择 Bundler 
&Minifier | Minify File( 精 简 文 件 )， 即 可 简单 地 配置 文件 的 精简 ， 并 
可 通过 选择 多 个 文件 并 选择 Bundler & Minifier | Bundle and Minify 
File 来 创建 打包 (请 参见 图 6-4)。 

荣 单 中 的 这 些 命令 实际 只 是 更 新 了 打包 配置 文件 bundleconfig 
json。 该 文件 的 一 个 示例 如 代码 清单 6-9 所 示 。 

代码 清单 6-9: bundleconfig.json 文件 示例 


[ 
{ 
"outputFileName": "wwwroot/css/site.min.css", 
"inputFiles": [ 
"wwwroot/css/site.css" 
] 
}, 
{ 
"outputFileName": "wwwroot/js/site.min.js", 
"inputFiles": [ 
"wwwroot/js/site.js" 


hy 
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ainiEy"s 1 
"enabled": true 
} 
Es 
{ 
"outputFileName": "wwwroot/js/bundle.js", 
"inputFiles": [ 
"wwwroot/js/site2.js", 
"wwwroot/js/site.js" 
], 
"sourceMap": true 


@ Open 
Open With. 
各 Run Web Code Analysis 
了 Minityfie Shift+Alt+F Bundler & Minifier 
Scopeto This 
团 New Solution Explorer view 
Exdude From Project 


有 b 
faviconico 


Cut CultX 
Copy CC pr 
Delete Del 


Rename 


xox 


Properties 


© Open 


Open with 
Run Web Code Analysis bin 
Controllers 
+ Bundler 8 Minifier » 
了 BundeandMiniyFles CShifttAlt+F a 
sir obj 
dude From Proj 四 
Brdude ject plorer | Tam Explorer 
% ot Cultx 
句 copy Cuhc 
X Deete Del 


amon 
Properties 


图 6-4 Bundler & Minifier 菜单 项 


该 文件 包含 一 个 打包 配置 的 列表 ， 每 个 打包 由 输出 文件 名 称 、 
输入 文件 列表 以 及 可 选 的 其 他 配置 设置 (如 启用 Source Map) 来 定义 。 

这 个 新 功能 并 不 排除 使 用 gulp。 如 果 前 端 构建 过 程 不 仅 是 捆绑 
文件 ， 还 可 从 菜单 中 创建 一 个 使 用 bundleconfigjson 文件 的 gulp 文 
件 (如 图 6-5 所 示 )， 然 后 扩展 该 文件 ， 在 其 中 纳入 其 他 任务 。 这 样 ， 
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打包 的 配置 仍然 可 以 通过 菜单 项 完成 ， 使 管理 更 加 简便 ， 即 使 在 使 
用 gulp 时 也 是 如 此 。 


© Open 
Open With.. Programcs 
和 runtimeconfig templatejson 
了 Update Bundles Bundler & Minifer De 
X Delete Bundle Output Files 》 TaskRunner Explorer web.config 
Enable bundle on build... Configure External Tools.. 
orer | Team Explorer 
V Produce Output Files Scope to This 
Convert To Gulp... New Solution Explorer View 
json File Properties 
净 Settings.. Exclude From Project Ee cielhs 


Cut 


Copy Content 
Delete i Do not copy 


Rename 


bundleconfig 
Properties CASamples\ 


图 6-5 转换 到 gulp 


由 Bundler& Minifier 扩展 创建 的 gulpfilejs 文件 如 代码 清单 
6-10 所 示 。 


代码 清单 6-10: 由 Bundler & Minifier 扩展 生成 的 gulpfile.js 


“Be Strict"s 


var gulp = require("gulp"), 
concat = require("gulp-concat"), 
cssmin = require("gulp-cssmin"), 
htmlmin = require("gulp-htmlmin"), 
uglify = require("gulp-uglify"), 
merge = require("merge-stream"), 
del = require("del"), 
bundleconfig = require("./bundleconfig.json"); 


Var regex = { 
css: /\.css$/, 
html: /\. (html1htm)S/， 
js: /\.js$/ 

Lo 


quilp task(t"min™” LT"min:js”,. “min:cse™ minehtml"]}s? 
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gulp.task ("min:js", function () { 
Var tasks = getBundles (regex.js) .map (function (bundle) { 
return gulp.src(bundle.inputFiles, { base: "." }) 


-pipe (concat (bundle.outputFileName)) 
-Pipe(uglify()) 
-Pipe (gulp.dest (".")); 


return merge (tasks); 


gulp.task ("min:css", function () { 
var tasks = getBundles (regex.css) .map (function (bundle) { 
return gulp.src(bundle.inputFiles, { base: "." }) 

-pipe (concat (bundle.outputFileName)) 
-pipe(cssmin()) 
-pipe (gulp.dest(".")); 

}); 

return merge (tasks); 


1D); 


gulp.task ("min:html", function () { 
var tasks = getBundles (regex.html) .map (function (bundle) 


return gulp.src(bundle.inputFiles, { base: "." }) 
.Pipe (concat (bundle.outputFileName)) 
.pipe (htmlmin({ collapseWhitespace: true，minifyCSS: 
true, minifyJS: true })) 
.pipe (gulp.dest (".")); 
}); 
return merge (tasks); 


1); 


gulp.task ("clean", function () { 
var files = bundleconfig.map (function (bundle) { 
return bundle.outputFileName; 


return del (files); 
}); 


gulp.task ("watch", function () { 
getBundles (regex.js) .forEach (function (bundle) { 


gulp.watch (bundle.inputFiles, ["min:js"]); 
1D); 


getBundles (regex.css) .forEach (function (bundle) { 
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gulp.watch (bundle.inputFiles, ["min:css"]); 


}); 


getBundles (regex.htm]l) .forEach (function (bundle) { 
gulp.watch (bundle.inputFiles, ["min:html"]); 
1); 
]) 


function getBundles (regexPattern) { 
return bundleconfig.filter(function (bundle) { 
return regexPattern.test (bundle.outputFileName); 
]) 
} 


6.4.2 ”任务 运行 程序 资源 管理 器 

Bundler & Minifier 以 及 gulp 的 任务 均 可 通过 Task Runner 
Explorer( 任 务 运行 程序 资源 管理 器 ) 手 动 运行 。 通 过 右 击 Project 
Explorer( 如 图 6-6 所 示 ) 中 的 gulpfilejs 文件 或 从 View | Other Windows | 
Task Runner Explorer 菜单 项 打开 此 窗口 。 


O Open packagejson 
Open With Program.cs 
runtimeconfig.templatejson 
各 Run Web Code Analysis orion 
Bundler & Minifier » |weh confia 


a. Bi lorer Team Explorer 


Configure Edemal Tools.. 


Scope to This lon-build items 
团 New solution Explorer View 

Excude From Project i re 

Cut Ctrl+X utput Directory ”Do not copy 


Copy Ctrl#C 


6-6 打开 Task Runner Explorer 


Task Runner Explorer 显示 了 gulpfile.js 文件 中 所 有 可 用 任务 以 
及 bundleconfig.json 文件 中 指定 的 所 有 文件 的 打包 关系 。 它 还 允许 
用 户 指 定 在 Visual Studio 中 运行 某 些 操作 时 要 运行 的 任务 。 可 将 任 
务 配置 为 在 以 下 情形 运行 : 
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e 当 项目 打 开 时 

e 当 调 用 Clean( 清 除 ) 操 作 时 

e 在 开始 构建 项 目 之 前 

e 在 项 目 构建 完成 后 

Task Runner Explorer 界面 如 图 6-7 所 示 ， 其 中 展示 了 左 侧 任务 
树 中 的 任务 ， 以 及 右 侧 任务 和 Visual Studio 操作 间 的 绑 定 关系 ， 
且 显示 了 配置 这 些 绑 定 的 下 拉 菜 单 。 


外“webApplication1 ~ 峰 Bindings 
4 器 bundleconfigjson Before Build (0) 
Update all files 4 After Build (1) 
Clean output files 4 器 bundleconfigjson 
4 JavaScript Update all files 
wwwrooUisysite.minjs b Clean (0) 
wwwroot/js/bundlejs b Project Open (0) 
4 Stylesheets 
wwwroot/css/site.min.css 
4 Gulpfilejs 
4 Tasks 
dean 
min 
min| pp Run 1 
| Bindings » Before Build 
MN 
wetch After Build 
Clean 
Project Open 


图 6-7 运行 中 的 Task Runner Explorer 


6.4.3 将 智能 提示 用 于 gulp 

最 后 , 由 于 gulp 文件 就 是 JavaScript 文件 ， 因 此 标准 JavaScript 
IntelliSense 会 为 其 触发 自动 完成 ， 并 显示 关于 gulp 和 gulp 插件 方 
法 的 信息 ， 如 图 6-8 所 示 。 


ee: task("min:html", function () { 

;var tasks = getBundles(regex.html). map(function (Eunals) { 
return gulp.src(bindle.inputFiles, { base: "." 
-pipe(concat(bund1é.outputFileName)) 

.pipe(htmlmin 
.pipe(gulp.de 


A 1 0f2 v concat(filename: string, [options?: IOptions]): NodelS.ReadWriteStream } 


return merge(tasks); 


D); 


图 6-8 gulp 的 智能 提示 (IntelliSense) 
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6.5 本章 小 结 


虽然 自动 化 构建 工具 已 经 存在 了 超过 40 年 ,但 直至 最 近 它 们 
才 被 引入 到 前 端 开发 圈 中 。 虽 然 .NET Web 开发 圈 仍 在 使 用 
MSBuild， 但 最 终 也 开始 采用 类 似 gulp 的 前 端 构建 系统 。 

Grunt 是 出 现 的 第 一 种 这 类 工具 ， 但 最 近 gulp 得 益 于 其 更 为 基 
于 代码 的 方法 , 获得 了 更 多 的 推动 力 , 微软 已 经 选择 它 作 为 在 Visual 
Studio 和 ASPNET Core 项 目 中 默认 支持 的 构建 工具 。 

在 本 章 中 ， 你 学 习 了 如 何 准备 前 端 产 品 以 用 于 发 布 。 下 一 章 将 
介绍 如 何 利用 这 些 任 务 , 将 项 目 部 署 到 自 有 环境 或 云端 的 服务 器 上 ， 
部 署 模式 包括 按 需 部 署 或 持续 部 署 。 
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本 章 主要 内 容 : 

ASP.NET Core 的 新 托管 模型 
如 何在 自 有 环境 中 部 署 

如 何 使 用 Azure 

使 用 git 和 Azure 进行 持续 部 署 
如 何 部 署 到 Docker 容器 


在 学 习 了 如 何 使 用 ASPNET Core MVC、Angular、Bootstrap 和 
gulp 生成 前 端 应 用 程序 之 后 ， 终 于 等 到 向 其 他 人 展示 应 用 程序 的 时 
刻 了 。 为 了 实现 该 目的 ， 需 要 部 署 应 用 程序 。 


本 章 代码 下 载 
本 章 的 相关 代码 可 通过 网 站 www.wrox.com 下 载 。 搜 索 该 书 的 
ISBN(978-1-119-18131-6)， 可 在 第 7 章 的 下 载 部 分 找到 对 应 代码 。 


212 


Web 前 端 开 发 一 一 使 用 ASPNET Core、Angular 和 Bootstrap 


7.1 ASP.NET Core 的 新 托管 模型 


在 研究 ASPNET Core 应 用 程序 的 部 署 前 ， 了 解 它 们 如 何 托管 
在 服务 器 内 很 重要 。 

在 传统 的 ASPNET 中 ,应 用 程序 是 托管 在 IS 应 用 程序 池 ( 也 称 
为 工作 进程 ，w3wp.exe) 中 的 DLL。 它 们 在 IIS 的 运行 库 管理 器 
(runtime manager) 处 被 实例 化 。 当 请 求 到 达 时 ， 将 被 发 送 到 位 于 
AppPool( 应 用 程序 池 ) 内 的 对 应 站 点 的 HttpRuntime 函数 处 。 简 而 言 
之 ， 应 用 程序 基本 上 是 由 IIS 本 身 控制 的 模块 。 

在 ASPNET Core 中 ， 处 理 方式 完全 不 同 。 控 制 台 应 用 程序 利 
用 Kestrel 运行 自己 的 Web 服务 器 。 每 个 应 用 程序 已 经 托管 了 自身 ， 
可 以 直接 通过 HTTP 响应 请 求 ， 因 此 你 可 能 会 疑惑 为 何 需 要 首先 使 
用 IIS。 原 因 是 Kestrel 是 一 款 针对 性 能 进行 了 优化 的 Web 服务 器 ， 
但 它 缺 少 IIS 管理 特性 。 因 此 开发 阶段 直接 在 Kestrel 上 运行 应 用 程 
序 没 有 什么 问题 ， 但 将 它们 暴露 给 外 部 世界 使 用 时 则 还 需要 IIS 。 

这 种 情况 下 , IIS 基本 上 作为 一 个 反 向 代理 运用 , 它 接收 请 求 并 
将 它们 转发 到 Kestrel Web 服务 器 上 托管 的 ASPNET Core 应 用 程 
序 。 然后，IIS 将 等 待 执行 管道 完成 其 处 理 ， 并 将 HITP 输出 发 送 回 
请 求 的 发 起 者 。 

该 过 程 是 通过 AspNetCoreModule 完成 的 , 该 模块 负责 在 应 用 程序 
首次 收 到 请 求 时 ， 调 用 dotnet run 命令 启动 它 。AspNetCoreModule 确 
保 应 用 程序 即使 衣 溃 也 能 保持 加 载 状态 ， 并 保持 运行 该 应 用 程序 的 
HTTP 端口 的 映射 关系 。 该 模块 通过 应 用 程序 根 目录 下 的 web.config 
文件 进行 配置 。 代 码 清单 7-1 展示 了 一 个 配置 示例 。 


代码 清单 7-1: 配置 AspNetCoreModule 的 web.config 


<configuration> 
<system.webServer> 
<handlers> 
<add name="aspNetCore" path="*" verb="*" 
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modules="AspNetCoreModule" 
resourceType="Unspecified"/> 

</handlers> 

<aspNetCore 
processPath="dotnet" 
arguments=".\PublishingSample.dll" 
stdoutLogEnabled="false" 
stdoutLogFile=".\logs\stdout"/> 

</system.webServer> 
</configuration> 


其 中 , 重要 的 配置 属性 是 processPath 和 arguments, processPath 
包含 将 侦 听 HTTP 请 求 的 可 执行 文件 的 路 径 , arguments 中 具有 传递 
给 进程 的 参数 。 在 标准 ASPNET Core 应 用 程序 中 ，processPath 的 
值 是 dotnet， 而 arguments 是 实际 应 用 程序 的 DLL 的 所 在 路 径 。 


7.2 在 自 有 IIS 环境 上 的 安装 


在 了 解 背景 理论 之 后 ， 接 下 来 重要 的 是 了 解 如 何在 IS 上 安装 
应 用 程序 。 


7.2.1 确保 一 切 就 绪 

通常 情况 下 ， 应 用 程序 安装 在 服务 器 上 ， 但 如 果 无 法 获得 服务 
器 ， 则 可 以 在 本 地 开发 计算 机 上 ， 按 照 本 书 的 步骤 进行 操作 。 开 始 
之 前 ， 确 保安 装 了 IS。 如 果 确 定 已 经 安装 好 了 IIS， 则 可 以 跳 过 这 
部 分 ， 直 接 进 入 “安装 AspNetCoreModule” 一 节 。 

第 一 步 检查 是 否 安装 了 IIS。 在 浏览 器 中 输入 http://localhost: 
如 果 得 到 如 图 7-1 所 示 的 欢迎 页 面 ， 则 IIS 已 经 安装 且 运 行 正 常 。 
和 否则， 如 果 得 到 “server not found”( 找 不 到 服务 器 ) 错 误 提示 ， 则 表 
示 本 地 网 站 未 运行 ， 原 因 可 能 是 IIS 未 安装 或 已 停止 运行 。 

现在 尝试 打开 它 。 为 此 ， 请 打开 IS Manager。 选 择 All Apps | 
Windows Administrative tools， 打 开 Default Web Site， 然 后 单 击 
Manage Website 下 的 Start 按钮 ， 如 图 7-2 右 侧 的 Actions 栏 中 所 示 。 
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gE Window: 
十 Windows 


Internet Information Services 


Bienvenue 


-+ Benvenuto ， 


1 Wh Bienvenido Hos geldiniz 


KOAWC 
Vibete oploarE 1 Ddvazaliok 


Velkommen S| 
7-1 “lIS 10 的 欢迎 页 面 


好 Default Web Site Home 
Fer ~- 0 -大 Showal | Group by: 目 
局 


Machine Key pes Providers Session State SMTP E-mail 围 Browse 80 (http) 


Advanced Sertings. 


Features View | Content View 


7-2 lIS Manager 


如 果 没 有 发 现 IS Manager， 则 意味 着 计算 机 上 尚未 安装 IIS 。 
为 了 安装 它 ， 请 打开 Windows Features 窗口 (可 通过 Control Panel | 
Programs | Turn Windows features on or o 企 访问 该 窗口 )， 选 中 World 
Wide Web Services 和 IIS Management Console (如 图 7-3 所 示 ), 然后 
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小 
| 
贿 


单 击 OK 按钮 。 
矶 windows Features Ys x 
Turn Windows features on or off ©@ 


To turn a feature on, select its checkbox. To turn a feature off, clear its checkbox. A filled 
box means that only part of the feature is turned on. 


日 口 | Internet Information Services 六 
FTP Server 
上 四 | Web Management Tools 
_] lls 6 Management Compatibility 
lIS Management Console 
lIS Management Scripts and Tools 
IIS Management Service 
World Wide Web Services 
Application Development Features 
Common HTTP Features 
Health and Diagnostics 
Performance Features 
Security 
Internet Information Services Hostable Web Core 
Isolated User Mode v 


< 


困 团团 田 地 


田 


ee 


7-3 ”Windows Features 窗口 


7.2.2 安装 AspNetCoreModule 

IIS 和 ASPNET Core 之 间 的 对 接 由 AspNetCoreModule 提供 。 
此 模块 作为 .NET Core Windows Server Hosting 软件 包 的 一 部 分 安 
装 ， 该 软件 包 还 安装 了 .NET Core Runtime 和 .NET Core Library， 
提供 了 一 种 非常 方便 的 在 Web 服务 器 上 启用 .NET Core 托管 服务 
的 方法 。AspNetCoreModule 也 作为 .NET Core SDK 的 一 部 分 进行 
安装 ， 所 以 如 果 在 开发 计算 机 上 运行 过 该 SDK， 应 该 已 经 拥有 了 
该 模块 。 

无 论 采用 哪 种 方式 安装 ， 现 在 应 该 能 够 在 IS Manager 的 模块 
列表 中 看 到 AspNetCoreModule( 见 图 7-4)。 
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ey Modules 
Use this feature to configure the native and managed code modules that process requests made to the Web server. 
Group by No Grouping 
Name 和 Code Module Type Entry Type A 
AnonymousAuthenticationM...  %windir3e\System32\inets\... Native Local 
Anonymousidentification System.Web.Security.Anony.. Managed Local 

lem32\in.., Native Local 
ConfigurationValidationModule C$%windire\System32\inets\... Native Local 
CustomErrorModule windir\System32\inetsv\... Native Local 
DefaultAuthentication System.Web.Security,Default.. Managed Local 
DefauktDocumentModule 3%windir3t\System32Ninetsr 必 Native Local 
DirectoryListingModule Bwindir\System32\inetsM\... Native Local 
FileAuthorization System.Web.Security.FileAuth.. Managed Local 
FormsAuthentication System Web.Security,FormsA.. Managed Local 
HttpCacheModule Kwindir\System32\inetsM\... Native Local 
HttpLoggingModule 3%windirXSystem32VinetsN.。 Native Local 
HttpRedirectionModule XKwindir\System32\inets\r,.. Native Local 
lsapifiterModule swindirx\system3zinetsrvf.。 Native Local 
lsapiModule Sowindir3G\System32Vinetsr 人 Ai Native Local 
OutputCache System.Web.Caching.Output.. Managed Local 
Profile System.Web.Profile.ProfileMo... Managed Local 
ProtocolSupportModule windir3aSystem32\inets\.. ~ Native Local 
RequestFikterinqgModule windir\System32\inetsM\... Native Local 中 


7-4 选中 了 AspNetCoreModule 的 IIS 模块 视图 


7.2.3 ”通过 命令 行 发 布 应 用 程序 

基础 软件 的 安装 现 已 完成 (幸运 的 是 只 需要 安装 一 次 )， 该 是 发 
布 应 用 程序 的 时 候 了 。 

简单 的 部 署 方法 是 使 用 dotnet publish 命令 。 默 认 情况 下 ， 此 命 
令 将 使 用 由 TargetFramework 指定 的 框架 ， 并 以 Debug 模式 生成 应 
用 程序 ， 把 应 用 程序 发 布 到 ./bin/[configuration]/[framework]/publish 
文件 夹 中 。 

此 发 布 操作 构建 应 用 程序 的 方式 与 dotnet build 命令 相同 , 但 它 
还 会 将 所 有 依赖 关系 和 引用 复制 到 一 个 自 包含 文件 夹 中 ， 可 以 方便 
地 将 该 自 包含 文件 夹 复制 到 目标 IS 文件 夹 中 (如 图 7-5 所 示 )。 除 此 
之 外 , publish 命令 还 运行 项 目 文件 中 指定 的 所 有 MSBuild 目标 , 例 
如 可 以 运行 脚本 和 样式 的 捆绑 (bundling) 和 精简 (minification)。 

它 还 会 在 项 目 根 文件 夹 中 创建 一 个 web.config 文件 (如 果 该 文 
件 已 经 存在 ， 则 更 新 它 )， 以 使 其 包含 与 代码 清单 7-1 中 所 示 内 容 类 
似 的 正确 值 。 


UD 
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图 7-5 包含 应 用 程序 代码 和 所 有 依赖 关系 的 自 包 含 文件 夹 


默认 文件 夹 隐藏 在 文件 夹 结构 中 。 你 或 许 想 以 Release( 发 布 ) 模 
式 发 布 。 调 用 publish 命令 时 通常 会 指定 所 有 选项 : 


dotnet publish 
--framework netcoreappl.1 
--output "c:\temp\PublishSample" 
--configuration Release 


7.2.4 ”创建 网 站 

最 后 一 步 显 然 是 在 IIS 中 创建 网 站 (也 即 Web 应 用 程序 )。 该 过 
程 非常 简单 ， 除 了 唯一 的 微小 特殊 之 处 ， 与 其 他 任何 IIS 网 站 的 创 
建 方式 相似 。 由 于 IS 只 作为 代理 而 不 执行 任何 .NET 代码 ， 因 此 必 
须 将 应 用 程序 池 配 置 为 “不 实例 化 .NET 运行 库 ”。 这 是 通过 选择 No 
Managed Code 选项 实现 的 ( 见 图 7-6)。 

完成 此 操作 后 ， 可 通过 指定 新 建 的 AspNetCore 应 用 程序 池 和 
已 发 布 应 用 程序 的 文件 夹 位 置 来 创建 网 站 (或 称 虚 拟 应 用 程序 )， 见 
图 7-7。 
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Add Application Pool ? x 
Name: 
AspNetCore 
‘NET CLR version: 
No Managed Code 4 


Managed pipeline mode: 
Integrated NM 


回 Start application pool immediately 


Edit Application 


Site name' Default Web Site 
Path: di 


Alias Application pook 
PublishSample | [AspNetCore 


Example: sales 


Physical path: 
Ci\temp\PublishSample 


Pass-through authentication 


Connect as Test Settings... 


DD Enable Preload 


7-7 在 IIS 中 创建 一 个 新 的 虚拟 应 用 程序 
现在 可 浏览 http://localhost/PublishSample, 并 享用 通过 IIS 提供 
的 ASP.NET Core 应 用 程序 。 


7.2.5 ”通过 Visual Studio 发 布 应 用 程序 
使 用 dotnet publish 命令 进行 发 布 ， 不 能 远程 部 署 应 用 程序 ， 也 
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不 支持 增 量 更 新 。 因 此 ， 在 Visual Studio 中 开发 时 ， 更 好 的 选择 是 
使 用 Publish 对 话 框 ， 可 从 Solution Explorer 的 上 下 文 菜单 或 Visual 
Studio 2017 中 引入 的 新 概览 屏幕 访问 该 对 话 框 。 

通常 ， 在 向 远程 服务 器 部 署 时 ， 系 统管 理 员 将 提供 一 个 发 布 配 
置 文件 。 当 导入 它 时 ，Visual Studio 将 根据 在 Publish 对 话 框 中 输入 
的 信息 ， 创 建 一 个 PowerShell 脚本 。 该 脚本 将 调用 一 个 PowerShell 
模块 ， 该 模块 执行 实际 的 WebDeploy 操作 。 

如 果 没 有 系统 管理 员 提供 的 发 布 配置 文件 ， 也 可 以 通过 为 服务 
器 配置 连接 参数 ， 创 建 一 个 自 定义 发 布 配置 文件 。 为 在 按照 本 章 所 
述 配置 的 远程 IIS( 已 经 正确 配置 了 Web Deploy) 上 测试 , 图 7-8 包含 
了 需要 设置 的 参数 。 


名 Publish 


CustomProfile * 


Settings 


Publish method: | Web Deploy 


Server: http://example.com 

Site name: Default Web Site/PublishingSample 
User name: usernamg| 

Password: 


Save password 


Destination URL: | http://example.com/PublishingSample 


Validate Connection 


[ <Prev Next > Sve Canal 
7-8 IIS 发 布 配置 文件 
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7.3 在 Azure 上 部 署 


替代 在 自 有 环境 中 部 署 的 另 一 种 选择 是 在 云 上 部 署 应 用 程序 
ee ee ni arin 并 在 使 用 Azure 
， 提 供 更 为 协调 完整 的 Visual Studio 体验 。 其 他 云 托管 解决 方案 
ee 因此 部 署 方式 类 似 于 在 自己 管理 的 远程 IS 上 执 
行 此 操作 。 
在 Azure 上 部 署 时 ， 有 两 种 可 行 方法 。 第 一 种 涉及 使 用 Publish 
对 话 框 和 Web Deploy(Web 部 署 )， 而 第 二 种 则 更 多 用 于 持续 部 署 应 
用 场景 ， 它 使 用 git， 并 利用 Kudu 直接 在 Azure 上 构建 应 用 程序 。 


7.3.1 使 用 Web 部 署 从 Visual Studio 部 署 到 Azure 

在 Visual Studio 中 ， 在 Azure 上 部 署 与 在 自 有 IIS 环境 中 部 署 
的 流程 没有 多 大 区 别 ; 如 果 所 有 资源 都 已 在 Azure 上 创建 , 情况 更 
是 如 此 。 这 种 情况 下 ， 只 需要 从 Azure 门户 下 载 发 布 配置 文件 (如 
图 7-9 所 示 )， 然 后 从 Publish 对 话 框 中 导入 它 。 


1 [2 


7-9 从 Azure 门户 获取 发 布 配置 文件 
当 需 要 新 资源 时 ， 处 理 方式 会 有 所 不 同 。 在 此 种 情况 下 ， 不 需 
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要 进入 Azure 门户 ,因为 可 以 通过 在 Publish 对 话 框 中 选择 Microsoft 
Azure App Service 作为 发 布 目标 ( 见 图 7-10)， 完 成 所 有 操作 。 在 此 
界面 中 , 可 以 选择 连接 到 一 个 现 有 的 应 用 程序 服务 (请 参见 图 7-11)， 
方法 是 选择 Select Existing 并 单 击 Publish 按钮 ， 也 可 以 通过 选择 
Create New， 创 建 一 个 新 的 应 用 程序 服务 。 


所 如 = x 
sn 日 
EE sample 本 
加 We Publish EL 
°° de Wy ede Mn me 站 
[Pa 
|| 
i fp ee ce 


nor tt Output Pchage Managm Comote Web Publsh Acbmy nk unm Erptomm 


图 7-10 选择 Microsoft Azure App Service 作为 发 布 目标 


App Service 故国 Microsoftaccount 、 
Host your web and mobile applications, REST Apls and more in Azure 四 ”一 -一 一 一 


Subsarption 

Converted Windows Azure MSDN - Visual Studio Ulimate 
View 
[Resource Group 


Search 


7-11 App Service 对 话 框 
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单 击 Publish 按钮 ,会 弹出 Create App Service 对 话 框 ( 见 图 7-12)。 
在 此 界面 中 ， 可 以 选择 将 新 应 用 程序 服务 归 入 现 有 资源 组 和 服务 计 
划 , 还 是 创建 一 个 新 资源 组 和 服务 计划 (在 创建 全 新 的 独立 应 用 程序 
时 ， 选 择 后 者 是 最 佳 实践 )。 


Create App Service 
Host your web and mobile applications, REST APIs, and more in Azure 


加 加 
[a 


Microsoft account = 、 


Web App Name 
[PublishingSample20170219063435 


Subscription 
Converted Windows Azure MSDN - Visual Studio Ulimate 


Resource Group 

PublishingSample20170219063435* ” New |0 
App Sevice Pon 

PublishingSample20170219063435Plan* “CC New- 


Clicking the Create button will create the following Azure resources 
Explore addibonal Arure service 


App Service - PublishingSample20170219063435 


App Service Plan - PublishingSample20170219063435Plan 


If you have removed your spending imit or you are using Pay as You Go there may be monetary impact if you provision additional resources, 
Leamn More 


[ewe |] 
7-12 ”Create App Service 对 话 框 


在 本 示例 中 ， 将 资源 组 称 为 应 用 程序 名 称 ， 为 服务 计划 自动 生 
成 的 名 称 保持 不 变 ( 确 保 服 务 的 Size 选择 的 是 Free, 如 图 7-13 所 示 ， 
这 样 就 不 会 因为 试用 它 而 被 收取 费用 )。 此 时 可 以 添加 其 他 附加 服务 
(其 他 应 用 程序 服务 或 SQL 数据 库 )。 

现在 单 击 Create, 将 在 Azure 上 创建 所 有 内 容 ,并 在 Visual Studio 
中 创建 发 布 配 置 文 件 ， 见 图 7-14。 

从 这 里 开始 ， 操 作 过 程 与 前 文中 使 用 Web Deploy 时 相同 。 可 
以 选择 配置 (Release 或 Debug)、 目 标 框架 、 数 据 库 选项 ， 并 且 可 以 
预览 将 在 服务 器 上 部 署 的 内 容 。 

利用 Web Deploy 进行 发 布 的 实际 过 程 包括 : 在 Visual Studio 
中 运行 dotnet publish 命令 ， 以 在 一 个 临时 文件 夹 中 创建 文件 包 ， 接 


着 利用 Web Deploy 将 文件 移动 到 服务 器 。 


Configure App Service Plan 
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An App Service plan is the container for your app. The App Service plan 
settings will determine the location, features, cost and compute... 


App Service Plan 


PublishingSample20170219063435Plan 


Location 


West Europe 


Size 
Free 


Free 


Shared 

B1 (1 core, 1.75 GB RAM) 
B2 (2 cores, 3.5 GB RAM) 
B3 (4 cores, 7 GB RAM) 
S1 (1 core, 1.75 GB RAM) 
S52 (2 cores, 3.5 GB RAM) 
S53 (4 cores, 7 GB RAM) 
P1 (1 core, 1.75 GB RAM) 
P2 (2 cores, 3.5 GB RAM) 


P3 (4 cores, 7 GB RAM) 


RE EDF WEW MORCT BMD DEBVG TEAM TOOS ANCMMCIRE TET AWE wwDOW HE 


0.9 8- Dam ~] my cru Dobpes © 
as 
中 Publish 


图 Peaceusorekx 


Summany 


Peo Goon aeeakarphaonTanraoeaa5 


parkt ouput Pdage varage Consae Web blh A Et Rumwe pkoe 


oorevoomozao65 


Es 
7-14 发布 到 Azure 配置 文件 
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与 其 他 部 署 方法 相 比 ，Web Deploy 的 美妙 之 处 在 于 增 量 发 布 。 
如 果 稍 后 更 改 了 文件 (例如 About.cshtml 文件 )，Web Deploy 会 将 新 
文件 与 已 发 布 的 文件 进行 比较 ， 然 后 只 发 送 新 文件 。 在 Publish 界 
面 中 可 以 访问 预览 窗口 ( 见 图 7-15)， 该 窗口 将 显示 实际 部 署 发 生 时 


狠 Publish 
[E 和 publshingsample20170219063435 scmazurewebsites seord 


回 Name Action ”Date modified Sie 
回 publshingsample depsjson Update 
回 publishingsampledll Update 
PublishingSample.pdb Update 
回 PublishingSample.runtimeconfigjson Update 
加 Views\Home\About.cshtml Update 
回 web.config Update 
回 wwwroot\css\site.css Update 
回 wwwroot\css\site.min.css Update 


Refresh file preview 


图 7-15 Web Deploy 预览 
注意 ， 预 览 窗口 还 会 显示 在 发 布 过 程 中 创建 的 文件 ， 例 如 更 新 
后 的 web.config、DLL 文件 、 精 简 后 的 样式 表 和 各 种 依赖 关系 配置 
文件 。 


7.3.2 利用 git 持续 部 署 到 Azure 

Azure 上 的 另 一 种 部 署 方法 是 利用 git 和 Azure 的 持续 部 署 功 
能 。 这 种 方法 的 主要 区 别 在 于 ， 仅 将 代码 推送 到 Azure， 所 有 构建 
和 发 布 操作 都 通过 Kudu 直接 在 Azure 上 进行 ， 而 不 是 在 Visual 
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Studio 中 (或 在 构建 计算 机 上 ) 构 建 然后 部 署 到 Azure。 
1. 配置 Azure 上 的 Web 应 用 程序 


为 进行 连续 部 署 ， 必 须 在 Azure 门户 上 配置 Web 应 用 程序 。 
该 操作 可 以 通过 选择 要 配置 的 Web 应 用 程序 、 找 到 Settings 中 的 
Deployment Source 菜单 项 并 选择 部 署 源 来 完成 。 在 此 处 可 找到 许多 
不 同 的 部 署 源 ( 见 图 7-16), 包括 类 似 Visual Studio Team Services、 git 
( 源 自 GitHub 或 本 地 ) 以 及 Bitbucket 的 源码 管理 服务 ， 和 类 似 
OneDrive 或 Dropbox 的 文件 共享 服务 。 


Wo Choosesource- Micros X SF 


€ > ©O | parecomwesource/subsaiptions/60e3dae3-de4c415 


«Choose Source 
Configure required settings 


图 7-16 部 署 源 


对 本 书 的 示例 而 言 ， 选 择 Local Git Repository 更 方便 ， 这 样 代 
码 可 以 在 不 需要 创建 额外 服务 的 情况 下 ， 直 接 从 你 的 计算 机 上 被 推 
送出 去 。 但 如 有 必要 ， 可 以 配置 任何 其 他 源 。 当 然 ， 其 他 部 署 源 选 
项 的 配置 步骤 会 有 所 不 同 。 

现在 ， 在 Web 应 用 程序 的 概览 窗 格 中 ， 即 可 看 到 用 于 git 克隆 
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操作 的 URL( 图 7-17), 需要 将 该 URL 配置 为 本 地 git 存储 库 ( 该 库 中 
包含 需要 部 署 的 代码 ) 的 远程 存储 库 。 


2 Publshingsample2017C x | 于 三 


€ > ©O | poralamwecomysresourca/sibscriptionwy60e3dae3-dB4c 4157-897-997975< 六 三 OQ. 


7-17 ”概览 窗 格 中 的 git 克隆 网 址 
2. 配置 本 地 存储 库 


现在 ， 必 须 将 某 些 代码 推送 到 Azure 存储 库 。 有 多 种 方法 可 以 
完成 该 操作 。 方 法 之 一 是 克隆 空 的 存储 库 并 在 其 中 创建 一 个 应 用 程 
序 。 另 一 种 方法 是 在 Visual Studio 中 创建 应 用 程序 ， 并 在 创建 项 目 
对 话 框 中 选中 Add to Source Control 复 选 枉 。 对 于 本 例 而 言 ， 必 须 
将 Azure 上 的 git 存储 库 指定 为 本 地 存储 库 的 远程 存储 库 。 可 以 通过 
很 多 方式 来 实现 该 操作 ,但 在 Visual Studio 中 ,可 以 在 Team Explorer 
中 的 Repository Settings 区 域 配置 远程 存储 库 (图 7-18)。 

现在 ， 即 可 从 Visual Studio 或 从 命令 行 中 将 代码 直接 推送 到 远 
程 存储 库 。 作 为 推送 操作 的 一 部 分 ，Azure 会 启动 发 布 命令 ， 该 命 
令 将 还 原 所 有 NuGet 包 ， 并 使 用 项 目 文件 生成 应 用 程序 。 每 次 提交 
操作 被 推送 到 存储 库 时 ， 都 会 启动 发 布 过 程 ， 从 而 有 效 地 实现 持续 
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Add Remote 

Name: [Azurd 

Feteh: [https//simonech@publishingsample20170219063435. scm azurewebsites ne 
Push: 


M] Push matches fetch Cancel 


Team Explorer - Repository Settings 区 
oo@¥lo 内 
Repository Settings | stng 7-1 ~ 
is ee = 
lgnore 


Edit 


Attributes File 


4 Diff & Merge Tools 
Diff Took Visual studio | 
Merge Took Visual Studio | Loca 


4 Remotes 
d 


b Other ~ 


7-18 在 Visual Studio 中 添加 远程 存储 库 
在 Azure 门户 上 ， 可 以 看 到 部 署 列 表 以 及 每 个 部 署 的 日 志 。 可 


以 使 用 前 文中 用 于 配置 Deployment Source 的 同 


署 列表 及 日 志 (图 7-19)。 


-个 菜单 项 ,访问 部 


‘2% Deployment Details-N x 于 


< os 


ortalazurecom urce ri je3dae 


万 Seweh (CI) 奖 已 


B Oevien ee 
Mtviyiog Changed about 
人 
heeess control (AM) Ve 
[rt 
和 Tags Add project files. 
me 
ee © 。 mae 
B05 PM 


Am pepLOWENT 
a auictan 

@ Deployment credentiats 
mi Deployment siots 

末 Deployment options 


区 Continuous Delivery (Preview) 


SEmwcs 


三 Application settings 


图 7-19 


物 Decomert。 净 coniou 


中 
尽 
人 


部 署 列表 
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注意 
如 果 在 Visual Studio 中 创建 了 远程 存储 库 ， 远 程 存储 库 不 会 被 
本 地 存储 库 追 踪 , 因此 在 第 一 次 推送 时 , 必须 在 命令 提示 符 中 输入 : 


git push -u azure master 


-u 选项 指示 git 开始 追踪 远程 存储 库 分 支 。 

除了 这 些 功能 外 ，Azure 还 支持 部 署 槽 (deployment slob 概 念 。 
它 就 像 一 个 “ 子 Web 应 用 程序 ” 工作 方式 类 似 一 个 普通 的 Web 应 
用 程序 ， 并 且 可 以 用 作 阶 段 测 试 环境 (staging environment)。 将 该 槽 
切换 到 生产 用 应 用 程序 之 前 ， 可 在 阶段 测试 环境 上 测试 部 署 。 


7.4 部 署 到 Docker 容器 


Visual Studio 2017 还 支持 利用 微软 提供 的 用 于 Docker 的 官方 
aspnetcore Linux 映像 , 将 ASPNET Core 应 用 程序 发 布 到 Docker 容 
器 .Visual Studio 2017 甚至 支持 在 Docker 容器 中 调试 ASPNET Core 
应 用 程序 ， 但 此 功能 默认 并 未 安装 ， 因 此 需要 几 个 步骤 来 实现 。 


7.4.1 安装 Docker 支持 

首先 ， 必 须 安装 适用 于 Visual Studio 2017 的 Docker 工具 。 安 
装 步骤 包括 : 打开 Visual Studio Installer 应 用 程序 ， 修 改 当 前 的 
Visual Studio 安装 , 选择 .NET Core cross-platform development 工具 
集 ， 在 右 侧 边栏 选择 Container development tools 可 选 组件 ( 如 图 
7-20 所 示 )。 

安装 这 些 工 具 后 ， 可 创建 一 个 新 的 ASPNET Core 应 用 程序 ， 
并 从 新 的 应 用 程序 对 话 框 中 直接 选择 Enable Docker Support。 该 对 
话 框 (如 图 7-21 所 示 ) 也 指向 安装 Docker for Windows 的 链接 ， 这 是 
运行 Docker 的 先决 条 件 。 


第 7 章 部 署 ASPNET Core 


Modilying — Visual Studio Enterprise 2017 — 15.41 


Workloads ividual components 


Summary 
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Other Toolsets (1) 
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7-20 .NET Core 跨 平 台 开发 工作 负载 对 话 框 


New ASP.NET Core Web Application - WebApplication4 ? 关 
NET Core vlAspNETCore20 | Learm more 
A project template for creating an ASP.NET Core 
Ns | 加 LA) application with example ASPNET Core MVC Views and 
S Ww Controllers, This template can also be used for RESTful 
Empty ‘Web API Web Web Angular HTTP services. 
Application Application 
(Model-View- Leamn more 
Controller) 


Reactjs Reactjsand 
ee Change Authentication 


Authentication -No Authentication 


IV] Enable Docker Support 


Os: | Windows 昭 


Requires Docker for Windows 
Docker support can also be enabled later Learn more 


Lo | 
图 7-21 选中 Enable Docker Support 选项 


这 会 在 项 目 中 添加 一 些 文件 ， 其 中 最 重要 的 文件 是 Dockerfile。 
该 文件 包含 Docker 用 于 构建 容器 的 指令 信息 。Visual Studio 2017 使 
用 的 Dockerfile 文件 内 容 如 代码 清单 7-2 所 示 。 
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代码 清单 7-2: Dockerfile 


FROM microsoft/aspnetcore:2.0 

ARG source 

WORKDIR /app 

EXPOSE 80 

COPY ${source:-obj/Docker/publish} . 

ENTRYPOINT ["dotnet", "DockerSample.d11"] 

这 个 文件 指示 Docker 从 microsoft/aspnetcore 中 的 2.0 版 本 官方 
映像 开始 创建 一 个 新 容器 , 在 新 创建 的 容器 中 创建 一 个 名 为 app 的 文 
件 夹 , 并 将 参数 source 所 指定 的 文件 夹 中 的 文件 或 文件 夹 obj/Docker/ 
publish 内 的 所 有 内 容 复制 到 app 文件 夹 。 

它 还 使 容器 监听 端口 80， 并 使 用 ENTRYPOINT 命令 ， 定 义 容 
器 启动 时 将 运行 的 可 执行 文件 。 在 本 例 中 ， 将 运行 dotnet 
DockerSample.dll 命令 来 启动 ASPNET Core 应 用 程序 。 

如 果 现 在 调试 应 用 程序 ， 它 将 不 像 通常 那样 在 IS Express 中 运 
行 ， 而 是 在 由 代码 清单 7-2 中 的 Dockerfile 创建 的 Docker 容器 内 
运行 。 通 过 工具 栏 中 调试 按钮 上 的 标签 也 可 以 清楚 地 看 出 这 一 点 
( 见 图 7-22)。 

BUILD DEBUG TEAM TOOLS ”ARCHITECTURE TEST ANALYZE WINDOW HELP 
DD- -Debug ~ AnycPU -| > Doderv 白 -| | 于- 风气 中 油 。 


7-22 ”使 用 Docker 工具 栏 按钮 进行 调试 


应 用 程序 在 容器 内 运行 的 另 一 个 证 据 是 ， 可 用 如 下 代码 替换 
应 用 程序 模板 中 的 About( 关 于 ) 操 作 ， 该 代码 显示 运行 代码 的 操作 
系统 。 

public IActionResult About () 

ViewData["Message"] = System-Runtime .InteropServices . 


RuntimeInformation.OSDescription; 
return View(); 
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当 程 序 在 Docker 内 运行 时 , 该 操作 会 显示 Linux Moby( 见 图 7-23)， 
这 是 微软 官方 aspnetcore docker 映像 所 使 用 的 Linux 发 行 版 。 
回 About - DockerSsample x 和 于 


| | ocalhost32770/H e/About 


About. 
Linux 4.9.8-moby #1 SMP Wed Feb 8 09:56:43 UTC 2017 


Use this area to provide additional information. 


© 2017 - DockerSample 


图 7-23 Docker 中 的 操作 系统 


如 果 想 将 Docker 添加 到 已 经 创建 的 应 用 程序 中 ， 可 从 Solution 
Explorer 的 Add 菜单 中 执行 此 操作 ( 见 图 7-24)。 


和 New ltem.. Ctrl+Shift+A Add » 
各 Existing ltem... Shift+AIt+A 将 ”Manage NuGet Packages... 

New Scaffolded ltem... Manage Bower Packages... 
略 New Folder Manage User Searets 
访 ”Docker Support 净 Setas StartUp Project 

Reference.. 了 
th Connected Service. % Cut Ctrl+X 
加。 Class... XX Remove Del 

加 ”Rename 


图 7-24 从 Add 菜单 中 选择 Docker Support 


7.4.2 发 布 Docker 映像 

在 Visual Studio 2017 中 ,也 可 将 Docker 映像 直接 发 布 到 Azure， 
方式 是 使 用 常规 的 Publish 对 话 框 ， 选 择 Container Registry, 然后 按 
照 本 章 前 面 所 介绍 的 相同 步骤 操作 。 但 如 果 只 想 让 映像 在 自己 的 


231 


232 


Web 前 端 开 发 一 一 使 用 ASPNET Core、Angular 和 Bootstrap 


Docker 服务 器 上 运行 ， 怎 样 做 呢 ? 目前 ， 必 须 依 靠 命令 行 工 具 ， 包 
括 dotnet 命令 和 docker 命令 。 

在 项 目 文件 夹 上 打开 命令 提示 符 后 ,首先 使 用 dotnet publish 命 
令 发 布 应 用 程序 : 


dotnet publish -o obj/Docker/publish 


该 命令 中 指定 了 obj/Docker/publish 路 径 ， 因 为 它 是 Dockerfile 
中 使 用 的 默认 路 径 。 
然后 运行 docker build 命令 创建 容器 的 映像 : 


docker build -t dockersample . 


-t 参 数 指定 了 映像 的 名 称 ,“.” 是 Dockerfile 的 路 径 。 

如 果 现 在 运行 docker images s 命令 列 出 系统 中 的 所 有 映像 ( 见 
图 7-25)， 将 看 到 新 创建 的 dockersample 映像 ， 以 及 用 于 构建 该 映 
像 的 刚 从 docker 存储 库 下 载 的 microsoft/aspnetcore。 


图 7-25 映像 列表 
现在 ， 即 可 使 用 docker run 命令 直接 运行 映像 : 


docker run -t -p 8080:80 dockersample 


参数 -p 告诉 docker 守护 进程 ， 将 容器 的 端口 80 重 定向 到 宿主 
机 的 端口 8080。 现 在 转 到 URL 地 址 http://localhost:8080 即 可 访问 
该 应 用 程序 。 

如 果 想 将 映像 迁移 到 另 一 台 服 务 器 , 可 以 使 用 docker save 命令 
将 其 保存 到 磁盘 ， 并 将 保存 的 文件 复制 到 目的 服务 器 ， 然 后 使 用 
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docker load 命令 加 载 它 。 


7.5 ”本 章 小 结 


使 用 ASPNET Core 托管 与 使 用 经 典 ASPNET 托管 有 所 不 同 。 
这 样 的 模型 看 起 来 貌似 是 技术 倒退 ， 但 在 下 一 章 中 将 看 到 ， 这 样 做 
允许 在 不 同 于 IIS 的 Web 服 务 器 (甚至 在 不 同 操作 系统 ) 上 托管 ASPNET 
Core 应 用 程序 。 为 了 支持 部 署 ASPNET Core 应 用 程序 所 需 的 额外 
步骤 ， 支 持 将 应 用 程序 投入 生产 的 构建 系统 ， 以 及 获得 向 其 他 操作 
系统 发 布 的 能 力 ， 微 软 开发 了 一 系列 更 好 的 部 署 工具 。 从 简单 的 本 
地 服务 器 手动 部 署 到 利用 阶段 测试 环境 的 连续 部 署 ，Visual Studio 
中 提供 的 工具 均 可 简化 操作 。 但 是 如 何 部 署 到 其 他 操作 系统 呢 ? 第 
8 章 将 介绍 如 何在 没有 Visual Studio 帮助 的 情况 下 开发 ASPNET 
Core 应 用 程序 ， 甚 至 开发 可 在 macOS 操作 系统 上 运行 的 应 用 程序 。 
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第 


非 Windows 环境 中 的 开发 


本 章 主 要 内 容 : 

e 如 何在 Mac 机 上 设置 ASP.NET 环境 
e@ Visual Studio Core 

e@ 在 Mac 上 承载 ASPNET Core 

e 使 用 命令 行 工具 


虽然 本 书 的 前 七 章 已 然 涵盖 了 从 Visual Studio 中 项 目的 基础 设 
置 ， 到 将 最 终 解决 方案 部 署 在 Azure 上 等 ASPNET Core 前 端 开发 
的 方方面面 工作 。 不 过 至 此 仍 未 涉及 .NET Core 的 一 个 主要 功能 ， 
即 跨 平台 支持 。 

本 章 的 全 部 内 容 就 是 介绍 跨 平 台 功 能 。 实 际 上 ， 虽 然 本 章 中 使 
用 的 所 有 流程 和 示例 都 是 使 用 Mac， 但 是 也 可 以 将 其 用 于 Linux 计 
算 机 ， 甚 至 是 没有 安装 Visual Studio 的 Windows 计算 机 上 。 

下 面 将 通过 在 Mac 上 安装 ASPNET Core 开始 学 习 旅程 。 
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本 章 代码 下 载 


本 章 的 相关 代码 可 通过 网 站 www.wrox.com 下 载 。 搜 索 该 书 的 
ISBN(978-1-119-18131-6)， 可 在 第 8 章 的 下 载 部 分 找到 对 应 代码 。 


8.1 在 macOS 上 安装 .NET Core 


在 Windows 上 安装 .NET Core 很 容易 ， 因 为 它 随 Visual Studio 
-起 发 布 。 但 是 在 Mac 和 Linux 计算 机 ， 以 及 在 没有 Visual Studio 

的 Windows 计算 机 上 ，.NET Core 框架 和 SDK 必须 手动 安装 。 

可 从 .NET Core 网 站 https://www.microsoft.com/net/core 下 载 用 
于 macOS 的 官方 NET Core SDK 并 安装 。 

为 确保 一 切 都 已 正确 安装 ， 可 按 第 1 章 中 介绍 过 的 同样 流程 进 
行 检查 。 基 本 操作 是 在 终端 中 , 进入 一 个 新 建 的 文件 夹 并 输入 dotnet 
new console。 这 将 创建 一 个 最 基本 的 控制 台 应 用 程序 (与 代码 清单 
1-1 中 的 相同 )。 然后 输入 dotnet restore 以 下 载 所 需 的 所 有 软件 包 ( 包 
括 主体 CoreCLR)， 最 后 ， 输 入 dotnet run 运行 程序 。 

结果 应 该 类 似 图 8-1 所 示 。 


© hello— -bash — 115x19 


图 8-1 在 macOS 上 创建 第 一 个 控制 台 app 


在 Linux 上 ,安装 的 具体 流程 取决 于 运行 的 发 行 版 ,但 与 macOS 
的 安装 十 分 类 似 。 使 用 发 行 版 附带 的 软件 包 管理 工具 下 载 前 提 条 件 
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下 载 二 进 制 文件 ， 并 解压 它们 。 有 关 各 个 发 行 版 如 何 安装 的 具 
pe 南 可 以 在 微软 .NET Core 网 站 https://www.microsoft.com/net/core 
找到 。 支 持 的 发 行 版 包括 Red Hat Linux 企业 版 7、Ubuntu 14/16、 
Mint 17/18、Debian 8、Fedora 23/24、CentOS 7.1、Oracle Linux 7.1 
以 及 openSUSE 13.2 和 42.1 等 版 本 ， 并 且 还 在 经 常 增加 新 版 本 。 


8.2 在 macOS 上 构建 第 一 个 ASP.NET 
Core 应 用 程序 


应 用 程序 可 以 如 前 文 所 述 一 样 ， 使 用 dotnet 命令 行 接口 创建 ， 
也 可 以 使 用 一 个 更 高 级 的 工具 ， 比 如 Yeoman。 


8.2.1 使 用 dotnet 命令 行 界面 

创建 一 个 ASPNET Core 应 用 程序 的 最 简单 方式 是 使 用 dotnet 
new 命令 ， 并 使 用 mvec 参数 指定 新 应 用 程序 的 类 型 。 这 将 创建 一 个 
网 站 ,该 网 站 类 似 于 在 Visual Studio 中 新 建 ASPNET Core 项 目 时 创 
建 的 默认 设置 (网 站 )。 

Restore 命令 是 自动 执行 的 ， 所 以 可 以 直接 使 用 run 命令 ， 即 可 
得 到 一 个 可 正常 运行 的 默认 网 站 。 

命令 行 的 输出 如 图 8-2 所 示 ， 而 生成 的 网 站 则 如 图 8-3 所 示 。 


web — dotnet + dotnet run— 115x23 


图 8-2 在 macOS 上 创建 一 个 示例 Web 应 用 程序 
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ASP.NET Core | Windows Linux OSX 


Application uses How to Overview Run & Deploy 
«Sample pages using ASPNET Com «AddaContoler and Vew Conceptual overview of what ie oe 
We: » Manage User Secrets using Secret ASPNET Com » Ran oo such as EF mrations 
ower for managng chen-sde Manager 。 Fundamentals of ASPNET Com and mam 
branem Use logging to lo message Such as Startup and mddeware. Publsh to Mcrosoft Azure Web 
。 Theming using Bootstrap ® Add packages using NuGet. ®» Working with Data 
* Add chent packages uang Bower > sec 
Te cevelopment, stagng or » Chent se 
producson ormwronnent 


©2017 -web 


8-3 ”运行 在 macOS 上 的 示例 网 站 


对 于 其 他 类 型 项 目 ， 也 有 对 应 的 项 目 模 板 可 用 , 例如 类 库 ( 参 数 
为 classlib)、 测 试 (mstest 或 xunit 参 数 ) 以 及 其 他 类 型 的 Web 项 目 (Web 
参数 建立 一 个 空 Web 项 目 以 及 webapi 参数 ) 等 。 以 后 还 可 以 加 入 
新 的 工程 。 可 以 通过 更 新 工具 或 从 社区 下 载 模 板 实现 该 操作 。 要 
查看 系统 中 可 用 的 模板 列表 ， 可 输入 命令 dotnet new--show-all( 如 图 
8-4 所 示 )。 

通过 使 用 模板 选项 也 可 以 控制 创建 项 目 操作 。 例如 , 对 于 类 库 ， 
可 通过 - 或 --framework 选项 指定 框架 的 版 本 (netcoreapp2.0 或 
netstandard2.0)。MVC 项 目 模板 可 以 选择 是 否 使 用 membership 身份 
验证 机 制 (以 及 大 量 其 他 选项 )， 数 据 库 方面 则 既 可 以 使 用 跨 平台 的 
SQLite, 也 可 以 使 用 Windows 的 LocalDB。 要 查看 模板 专属 的 选项 ， 
可 输入 命令 dotnet new < 左旋 名 > --help。MVC 模板 的 选项 如 图 8-5 
所 示 。 
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图 8-4 项目 模板 列表 


图 8-5 MVC 项 目 模 板 的 选项 
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因此 , 可 通过 输入 以 下 命令 创建 一 个 具有 membership 身份 验证 
的 MVC 项目: 


dotnet new mvc -au Individual 


上 述 命令 中 创建 的 项 目 同样 是 一 个 全 堆栈 跨 平 台 项 目的 例子 ， 
为 它 也 包括 了 身份 验证 提供 程序 ， 该 提供 程序 使 用 Entity 
Framework Core 将 用 户 数据 保存 到 一 个 数据 库 中 。 和 使 用 Visual 
Studio 创建 的 同类 项 目 不 同 的 是 ， 该 项 目 使 用 的 是 SQLite 而 不 是 
SQL Server， 因 此 在 Windows 和 Mac 计算 机 上 均 可 运行 。 

在 能 够 正常 运行 该 项 目 ( 包 括 将 一 份 新 的 登录 信息 保存 到 数据 
库 的 那 部 分 代码 ) 之 前 ， 必 须 运行 Entity Framework 迁移 。 该 操作 可 
通过 在 dotnet 命令 行 界面 使 用 Entity Framework 工具 完成 。 


dotnet ef database update 


Entity Framework 迁移 


在 创建 一 个 项 目 时 ， 其 中 并 不 包含 数据 库 。 为 创建 数据 库 以 及 
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所 需 的 所 有 数据 表 ， 必 须 运行 一 个 特定 的 设置 过 程 。 该 操作 是 通过 
运行 数据 库 迁 移 完成 的 。 这 部 分 将 在 第 9 章 中 进行 更 详细 地 介绍 。 
使 用 dotnet 命令 行 接口 ,还 可 以 加 入 对 NuGet 包 (例如 dotnet add 
package Newtonsoft.Json) 和 其 他 项 目 (dotnet add reference../lib/lib. 
csproj) 的 引用 。 当 然 ， 也 可 以 通过 remove 命令 删除 这 些 引用 。 


8.2.2 使 用 Yeoman 

作为 SDK 的 一 部 分 ，dotnet 命令 行 接口 是 创建 ASPNET Core 
应 用 程序 的 一 种 非常 方便 的 方式 ， 但 该 方式 的 灵活 性 并 不 是 很 高 。 
为 解决 该 问题 ，.NET 社区 开发 了 一 些 Yeoman 的 生成 器 。Yeoman 
是 一 种 通用 的 “脚手架 ”和 代码 生成 工具 。 在 前 端 开发 社区 中 广泛 
使 用 ， 用 于 按照 最 佳 实践 指出 的 文件 夹 设置 和 工具 配置 ， 为 多 种 框 
架 ( 例 如 Angulan 创 建 项 目 。 
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首先 必须 安装 Yeoman 脚手架 工具 。 和 本 书 前 文 介绍 的 所 有 工 
具 一 样 ， 该 工具 使 用 npm 安装 : 


npm install -9 yo 

然后 需要 安装 官方 ASPNET 代码 生成 器 , 同样 , 也 是 通过 npm 
进行 安装 

npm install -9 generator-aspnet 

yo 是 用 于 运行 生成 器 的 命令 行 工具 。 要 启动 该 工具 ， 只 需要 在 
终端 窗 [ ] 中 输入 Yo。 

注意 

尽管 Yeoman 并 不 严格 地 依赖 于 Bower 和 gulp， 但 大 多 数 生成 
的 项 目 都 会 使 用 它们 ， 所 以 如 果 你 是 跳 过 第 5 章 和 第 6 章 而 直接 阅 
读本 章 的 话 ， 可 能 也 希望 安装 它们 。 

现在 可 选择 要 运行 哪个 生成 器 (如 果 是 首次 使 用 该 工具 , 则 只 有 
刚 安 装 的 aspnet 可 用 )，Yeoman 的 生成 器 选择 界面 如 图 8-6 所 示 。 


test — yo MANPATH= /sessinonel. nvm/versions/node/v7.4.0/sha... 


2 e$ yo 
What 1 you like to do? 


图 8-6 Yeoman 的 生成 器 选择 界面 
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选择 aspnet 后 ， 就 会 出 现 另 一 个 菜单 ， 其 中 列 出 了 可 以 生成 的 
所 有 类 型 的 ASPNET Core 项 目 (图 8-7)。 可 在 终端 中 输入 yo aspnet 
直接 将 Yeoman 启动 到 这 个 菜单 。 

© test 一 yo MANPATH=/Users/simone/.nvm/versions/node/v7.4.0/share/man:/usr/Ioc... 


Simones-MacBook-Pro:test simone$ yo 
"Allo Simone! What would you like to do? A 


ication do you want to create? 
和 
nm (F#) 


Apl 
Web API Applicat 


图 8-7 Yeoman 的 ASPNET Core 生成 器 


在 可 用 选项 中 ， 可 看 到 Web Application Basic( 基 本 Web 应 用 程 
序 )， 它 指向 没有 membership 身份 验证 和 授权 机 制 的 ASPNET Core 
应 用 程序 模板 。 如 果 选 择 该 选项 ， 则 将 询问 需要 使 用 的 用 户 界面 杠 
架 ( 可 在 Bootstrap 和 Semantic 用 户 界 面 之 间 进 行 选择 )。 

最 后 ， 选 择 应 用 程序 的 名 称 并 按 下 回 车 键 。 

在 界面 上 ， 可 以 碍 看 安装 进度 。 首 先 创 建文 件 和 文件 夹 ， 然 后 
从 软件 库 中 获取 依赖 的 Bower 软件 。 在 过 程 的 最 后 ， 界 面 上 会 显示 
如 何 构建 和 启动 应 用 程序 的 信息 。 
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8.3 Visual Studio Code 


既然 项 目 已 经 生成 ， 现 在 需要 的 是 一 个 文本 编辑 器 ， 用 于 编写 
一 些 有 用 的 代码 , 可 能 还 需要 IntelliSense 以 及 程序 调试 功能 ,为 此 ， 
微软 开发 了 Visual Studio Code， 它 是 一 种 基于 文本 的 通用 开放 源 代 
码 IDE( 集 成 开发 环境 )。 
8.3.1 设置 Visual Studio Code 环境 

可 从 https://code.visualstudio.com/ 下 载 Visual Studio Code。 和 许 
多 其 他 文本 编辑 器 一 样 ， 它 可 以 通过 扩展 程序 进行 扩展 。 一 种 扩展 
是 增加 对 C# 的 IntelliSense 支持 ， 以 及 增加 ASPNET Core 应 用 程序 
调试 功能 。 为 安装 该 扩展 , 请 打开 “扩展 ” 窗 格 并 输入 @recommended。 
此 时 将 显示 推荐 的 扩展 程序 列表 ， 可 以 从 中 找到 提供 C# 文 持 的 
扩展 。 

在 安装 并 启用 该 扩展 程序 后 ， 打 开 包含 使 用 dotnet 命令 行 界面 
或 Yeoman 创建 的 Web 应 用 程序 的 文件 夹 。C# 扩 展 将 检查 文件 ， 并 
要 求 添加 正常 工作 所 需 的 两 个 配置 文件 : launch.json 和 tasks.json。 
如 果 此 时 尚未 恢复 依赖 关系 ， 则 需要 进行 恢复 ， 如 图 8-8 所 示 。 


Wa rea b'. Add them? Dont Ask Again NotNow Yes 


i There ase execute the restore command to continue. Restore close 


图 8-8 Visual Studio Code 中 的 依赖 关系 警告 信息 
此 后 ， 这 两 个 文件 将 保存 在 .vscode 文件 夹 中 ,它们 包含 用 于 启 
动 和 构建 应 用 程序 的 配置 。 正 确 的 设置 会 自动 添加 ， 所 以 目前 不 必 
过 度 关 心 文件 的 内 容 。 


在 Visual Studio Code 中 安装 C# 支 持 


在 安装 扩展 程序 后 第 一 次 打开 .NET Core 项 目 时 ， 将 安装 所 有 


本 机 调试 器 和 运行 库 ， 因 此 在 开始 使 用 前 还 需要 耐心 等 待 几 分 钟 。 
扩展 程序 还 会 在 每 次 启动 时 检查 调试 器 和 运行 库 的 更 新 情况 ， 因 此 
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当 有 新 更 新 时 ， 也 需要 执行 该 下 载 。 不 过 不 必 担 心 ， 一 切 都 在 后 台 
执行 。 
8.3.2 Visual Studio Code 的 开发 特性 


月 


进行 正确 配置 后 ，Visual Studio Code 就 成 为 一 个 基于 代码 的 、 
有 于 构建 .NET Core 应 用 程序 的 、 功 能 完备 的 IDE。 下 面 介绍 它 的 


主要 特性 。 


1. 智能 提示 


得 益 于 C# 扩 展 程 序 ，Visual Studio 代码 可 以 提供 智能 提示 


(mtelliSense)、 代 码 自 动 完 成 、 语 法 高 亮 显 示 以 及 类 似 标准 Visual 


S 


tudio 的 上 下 文 关联 帮助 ， 如 图 8-9 所 示 。 


references 
public Startup(IHostingEnvironment env) 
{ 
var builder = new ConfigurationBuilder() 
"SetBasePath(env.ContentRootPath) 
"AddJsonFile("appsettings,.json", optional: false, reloadOonChange: true) 
,AddJsonFile($"appsettings. {env.EnvironmentName}.json", optional: true) 


,而 Add IConfigurationBuilder Add(IConfigurationSource .0 
Confi 加 AddEnvironmentVariables 
四 回 AddInMemoryCollection 
加 AddjsonFile 
2 references 回 Buitd 
public IC 加 Equals 
@ GetFileLoadExceptionHandler 
// This m@® GetFileProvider [vices to the container, 
Oreferences @ GetHashCode 
public vo @ GetType 
{ ££ Properties 
// Ad @ SetBasePath 
services.AddMvc(); 
下 


8-9 Visual Studio Code 中 的 智能 提示 


该 功能 并 不 局 限于 .NET Code, 还 适用 于 JavaScript 和 TypeScript 


(受到 Visual Studio Code 的 支持 ), 以 及 CSS、HTML 和 Sass 等 语言 。 


2. 重 构 
一 些 你 已 在 Visual Studio 中 习惯 的 重 构 和 代码 导航 功能 
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Visual Studio Code 中 同样 可 用 。 可 使 用 “ 跳 转 到 定义 (Go to 
Definition)”“ 查找 所 有 引用 (Find All References)”“ 重 命名 符号 
(Rename Symbol)”“ 查阅 定义 (Peek Definition， 如 图 8-10 所 示 )” 等 
功能 。 


TI 


图 8-10 查阅 定义 


3. 错误 和 改正 建议 


和 它 的 “老大 哥 ”Visual Studio 一 样 ，Visual Studio Code 也 可 
以 在 存在 问题 的 代码 行 下 加 注 红色 下 划 线 。 在 某 些 情况 下 ， 它 还 可 
以 显示 一 个 灯泡 图 标 ， 提 出 如 何 解决 错误 的 建议 ， 如 图 8-11 所 示 。 

Visual Studio Code 还 将 所 有 问题 和 错误 显示 在 “问题 (Problem)” 
面板 中 ， 该 面板 可 通过 单 击 状态 栏 的 错误 计数 来 激活 ， 如 图 8-12 
所 示 。 
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C HomeController.cs @ 
2 using System; 
2 using System.Collections.,Generic; 
和 using System.Linq; 
4 using System.Threading.Tasks; 
5 using Microsoft.AspNetCore.Mvc; 
6 
也 namespace web.Controllers 
| 
0 references 
9 public class HomeController : Controller 
19 { 
Oreferences 
11 public IActionResult Index() 
12 { 
13 return View(); 
14 } 
15 
0 references 
16 public IActionResult About() 
17 { 
18 ViewData["Message"] = SayHellol(; 
19 
20 return View(); 
21 } 
22 
23 
24 
Oreferences 
25 public IActionResult Contact() 
PROBLEMS OUTPUT DEBUG CONSOLE TERMINAL Filtel 
@ The name 'SayHello1' does not exist in the current context [web] (18, 35) 
@ Unnecessary using directive. [web] (1, 1) 
© Unnecessary using directive. [web] (2, 1) 
@ Unnecessary using directive. [web] (3, 1) 
@ Unnecessary using directive. [web] (4, 1) 
4 0 Program.cs © 
@ Unnecessary using directive. [web] (1, 1) 
© Unnecessary using directive. [web] (2, 1) 
@ Unnecessary using directive. [web] (4, 1) 
@ Unnecessary using directive. [web] (5, 1) 


图 8-11 突出 显示 错误 


x Wi 


图 8-12 ”状态 栏 错误 计数 


4. 调试 


调试 所 编写 的 代码 可 能 是 一 个 最 重要 的 IDE 功能 。 Visual Studio 
Code 的 这 项 能 力 确实 出 类 拔 荣 。 
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只 要 将 前 述 的 配置 文件 tasksjson 和 launch.json 置 于 程序 文件 
夹 中 ， 调 试 .NET 应 用 程序 简单 得 就 像 单 击 工 具 栏 中 的 Run 按钮 ， 
并 在 代码 中 设置 断 点 ， 如 图 8-13 所 示 。 


eo0 Homeconroter cs — web 
MTomlamenime 疝 回 。 OHomeControlercs x | 入 上 要: 
z pituc TIRE 


图 8-13 调试 ASPNET Core 应 用 程序 


与 其 他 功能 类 似 ， 调 试 功能 也 适用 于 安装 了 对 应 扩展 程序 的 语 
言 ， 例 如 JavaScript、TypeScript 或 Node.js。 


5. 版 本 控制 


Visual Studio Code 另 一 个 有 价值 的 功能 是 集成 了 对 版 本 控制 系 
统 的 支持 。Visual Studio Code 附带 git 客户 端 ， 该 客户 端 具备 一 个 
可 用 于 提交 、 同 步 、 拉 取 和 推送 等 最 常用 功能 的 简单 用 户 界面 。 如 
果 需 要 更 丰富 的 控制 功能 , 它 还 有 一 个 更 偏向 文本 式 的 界面 (通过 命 
令 面 板 )。 此 外 , 也 有 其 他 版 本 控制 系统 可 供 下 载 (以 扩展 程序 形式 )， 
如 Visual Studio Team Services 等 ， 如 图 8-14 所 示 。 
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EXTENSIONS 


category:"SCM Providers" @sort:installs| 


Visual Studio Team Services 1.119.0 命 95K 友 3 


[eg | | Connect to Team Services including Team Foundation... 
Microsoft | Install | 


Perforce for VS Code 2.10 全 9K 太 5 
Perforce integration with VS Code's SCM features 
slevesque 
Hg 1.1.4 人 6K 太 5 
By) Integrated Mercurial source control 
~ mrcrowl 


8-14 ”其 他 源 代码 控制 提供 程序 


编辑 器 也 会 在 文本 中 直接 给 出 一 些 提示 信息 ， 使 用 不 同 颜色 标 
记 新 的 和 修改 的 代码 行 。 

Visual Studio Code 还 有 一 个 集成 的 文件 比较 工具 ， 可 用 于 显示 
版 本 之 间 的 差异 ， 也 可 比较 任意 文件 ， 如 图 8-15 所 示 。 


8-15 ”Diff 窗口 
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6. 任务 


Visual Studio Code 支持 任务 执行 程序 ， 所 以 可 以 直接 从 命令 面 
板 运行 gulp 和 Grunt 任务 。 也 可 以 通过 在 tasks.json 文件 中 指定 以 
运行 任何 其 他 类 型 的 命令 , 该 文件 正 是 前 文 介绍 设置 C 府 六 展 程序 时 
提 到 的 那 一 个 。 

tasks.json 文件 的 基本 结构 如 代码 清单 8-1 所 示 。 要 运行 的 命令 
在 command 属性 中 指定 ， 接 下 来 可 以 指示 要 使 用 指定 命令 的 任务 。 
对 于 本 示例 代码 ， 只 有 一 个 指定 的 任务 , 其 taskName 属性 为 build， 
并 将 当前 的 .csproj 文件 作为 其 参数 。 本 示例 代码 还 指示 Visual Studio 
Code 将 该 任务 用 作 项 目的 默认 构建 命令 (isBuildCommand 属性 ), 并 
指定 任务 的 输出 将 由 一 个 “问题 匹配 器 ”($msCompile) 进 行 扫描 ， 
以 在 编辑 器 和 问题 面板 中 报告 错误 和 问题 。 

代码 清单 8-1 tasks.json 文件 


{ 
Versdon™e T0005 
"command": "dotnet", 
"isShellCommand": true, 
"args": [], 
"tasks": [ 
1 
"taskName": "build", 
“args"s 
"${workspaceRoot}/web.csproj" 
], 
"isBuildCommand": true, 
"problemMatcher": "$msCompile" 


Visual Studio Code 包含 的 有 价值 功能 如 此 之 多 ， 以 至 于 光 是 描 
述 它们 就 可 能 占据 本 书 的 一 半 篇 幅 。 除 了 上 文 所 述 ， 它 还 包括 现代 
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文本 编辑 器 的 所 有 典型 功能 。 它 具有 可 自动 扩展 的 集成 代码 片段 库 ， 
以 便 更 快 地 输入 代码 。 它 还 具有 前 面 已 经 介绍 过 的 命令 调 色 盘 ， 可 
以 通过 该 调 色 盘 ， 便 捷 地 访问 编辑 器 及 其 扩展 程序 提供 的 所 有 命令 
(甚至 包括 那些 没有 显 式 提供 菜单 项 的 命令 )。 在 Visual Studio Code 中 ， 
还 可 以 直接 与 终端 窗口 进行 交互 ， 而 不 必 打 开外 部 应 用 程序 。 

更 重要 的 是 ，Visual Studio Code 是 可 扩展 的 ， 可 以 很 容易 地 按 
需 添 加 新 的 语言 和 功能 文 持 。 例 如 , 本 书 就 是 完全 使 用 Visual Studio 
Code 及 其 标记 语言 支持 撰写 完成 的 。 

要 更 详细 地 探索 Visual Studio Code 的 功能 , 请 访问 其 官方 网 站 


code.visualstudio.com。 


8.3.3 OmniSharp 

所 有 这 些 功 能 ， 就 其 对 .NET Core 的 支持 而 言 ， 都 可 以 归功 于 
OmniSharp。OmniSharp 是 一 组 开源 软件 项 目 , 这 些 项 目 共同 致力 于 
将 .NET 开发 引入 到 任意 文本 编辑 器 中 。 

这 些 项 目的 基础 层 是 一 个 运行 Roslyn 的 服务 器 , 分 析 在 编辑 器 
中 打开 的 项 目 文件 。 

在 服务 器 之 上 ， 是 一 套 API( 基 于 REST， 使 用 HITP 或 管道 承 
载 )， 该 API 使 香客 户 端 (利用 相应 打 展 程序 的 文本 编辑 器 ) 得 以 通过 
查询 代码 模型 ， 获 取 IntelliSense、 参 数 信息 、 对 某 个 变量 的 引用 ， 
或 是 某 个 方法 的 定义 等 数据 。 

该 架构 的 顶层 则 完全 属于 编辑 器 专属 的 扩展 程序 ， 该 扩展 程序 
以 用 户 友好 的 方式 显示 从 OmniSharp 服务 器 检索 到 的 信息 。 顶 层 还 
包括 那些 纯 属 客户 侧 的 功能 ， 如 代码 格式 化 或 代码 片段 扩展 。 扩 展 
程序 也 负责 与 调试 器 交互 ， 并 提供 调试 代码 需要 的 所 有 功能 

人 们 已 针对 市 场 上 最 流行 的 文本 编辑 器 开发 了 mie 扩展 
程序 .除了 Visual Studio Code, 还 有 Atom、Vim、 Sublime 甚至 Emacs 
的 扩展 。 这 意味 着 你 可 以 继续 使 用 所 喜爱 的 文本 编辑 器 ， 并 且 仍然 
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能 够 享受 由 OmniSharp 赋予 的 丰富 代码 编辑 体验 的 所 有 优点 。 


8.3.4 其 他 IDE 

如 前 所 述 ，OmniSharp 支持 使 用 其 他 文本 编辑 器 ， 如 Atom、 
Sublime、Vim 和 Emacs 开发 .NET Core 应 用 程序 。 但 是 ， 所 有 这 些 
文本 编辑 器 都 缺乏 对 大 多 数 开发 者 所 使 用 的 许多 Visual Studio 代码 
重 构 揪 件 (例如 ReSharper 和 类 似 的 工具 等 ) 的 支持 。 

为 弥补 这 一 差距 ，JetBrains( 开 发 ReSharper 的 公司 ) 决 定 扩大 其 
IDE 产品 线 。 它 正在 开发 Project Rider， 这 是 一 款 基于 IntelliJ 平台 
的 完备 IDE， 包 括 所 有 ReSharper 的 重 构 特 性 。 

该 项 目 仍 在 开发 中 , 但 考虑 到 ReSharper 在 .NET 开发 者 中 的 流 
行程 度 ， 以 及 该 公司 其 他 工具 (尤其 是 用 于 JavaScript 开发 的 
WebStorm) 的 普及 , Rider 很 可 能 在 基于 文本 的 C# 集 成 开发 环境 市 场 
中 成 为 重要 角色 之 一 。 

微软 同样 推出 一 款 运 行 在 Mac 系统 上 的 “完整 ”版 Visual 
Studio， 如 果 你 感 兴趣 ， 可 从 网 址 https://www.visualstudio.com/vs/ 


visual-studio-mac/ 下 载 。 


8.4 使 用 命令 行 工 具 

在 你 阅读 前 面 的 章节 时 ， 可 能 只 是 晴 蜂 点 水 地 浏览 了 如 何 通 过 
命令 行 来 使 用 各 种 前 端 工具 的 内 容 。Visual Studio 已 经 集成 了 对 这 
些 工 具 的 支持 ， 因 此 不 必 学 习 它们 的 命令 行 界面 。 

当 使 用 Visual Studio Core( 或 你 喜爱 的 文本 编辑 器 ) 时 ， 其 中 一 
些 将 无 法 使 用 ， 所 以 需要 开始 使 用 命令 行 。 

笔者 建议 你 回顾 本 书 前 面 的 章节 ， 并 复习 关于 各 种 工具 的 命令 
行 用 法 。 表 8-1 提供 了 一 个 简短 的 “ 备 态 单 ”， 其 中 包含 可 能 需要 的 
最 常用 命令 。 
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安装 依赖 关系 并 保存 在 本 地 项 目 中 
恢复 已 定义 的 所 有 依赖 关系 

安装 依赖 关系 并 保存 在 本 地 项 目 中 
恢复 所 有 软件 包 

运行 gulp 任务 

恢复 .NET Core 依赖 关系 

发 布 一 个 .NET Core 项 目 


npm install <package> --save 


npm update 


bower install <package> --save 


bower install 


gulp <taskname> 


dotnet restore 


dotnet publish 


8.5 ”本 章 小 结 


甚至 在 CoreCLR 面世 之 前 ， 通 过 使 用 Mono， 就 可 以 在 非 
Windows 计算 机 上 运行 ASPNET， 但 通常 认为 它 更 像 是 一 个 玩具 ， 
而 不 是 企业 愿意 用 于 生产 环境 的 成 熟 产 品 。 并 且 , IDE 还 不 够 稳定 ， 
无 法 让 开发 者 直接 在 Mac 上 开发 应 用 程序 。 因 此 当时 “ 跨 平台 ” 
词 更 多 指 在 Linux 计算 机 上 运行 最 终 软件 的 能 力 。 

顺应 .NET Core 和 Visual Studio Code 的 出 现 ,“ 跨 平台 ”概念 也 
变 为 “不 使 用 Visual Studio 和 Windows 开发 ” 

Visual Studio Code 不 仅 适 用 于 Mac 和 Linux 用 户 ， 它 也 可 以 在 
Windows 上 运行 ， 许 多 开发 者 现在 开始 使 用 Visual Studio Code， 作 
为 更 耗资 源 的 Visual Studio 的 奉 代 品 。 实 际 上 ， 本 章 也 可 以 命名 为 

“不 使 用 Visual Studio 进行 开发 ”。 

至 此 ， 本 书 已 经 分 别 介绍 了 前 端 开发 的 所 有 方面 ， 从 ASPNET 
Core 的 服务 器 端 部 分 到 JavaScript 和 CSS 客户 端 ， 以 及 第 三 方 软件 
包 的 管理 和 云端 的 部 署 。 接 下 来 学 习 如 何 构建 一 个 麻 稚 虽 小 、 五 脏 
俱全 的 现代 ASPNET Core Web 应 用 程序 。 


ed 
综 运 用 
本 章 主要 内 容 : 


e@ 如 何 使 用 Entity Framework Core 
e@ 使 用 OAuth 给 用 户 授权 
e@ 利用 Visual Studio 基 架 机 制 的 优势 


通过 前 面 章节 的 学 习 ， 你 已 经 学 习 了 使 用 ASPNET Core 开发 
和 部 署 现代 Web 应 用 程序 所 需 的 各 种 技术 和 语言 , 但 尚未 将 它们 组 
合 运用 ， 打 造 一 个 完整 的 应 用 程序 。 

本 章 将 填补 这 一 鸿沟 ， 并 展示 如 何 将 所 有 技术 综合 运用 ， 构 建 
一 个 实际 的 应 用 程序 (的 一 部 分 )。 在 此 过 程 中 ， we 
涉及 的 ASPNET Core 的 一 些 功能 ， 例 如 使 用 OAuth(Facebook 或 
TwittenD) 进 行 身 份 验证 ， 以 及 使 用 Entity Framework Core 进行 数据 持 
久 化 。 
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本 章 代 码 下 载 
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本 章 的 相关 代码 可 通过 网 站 www.wrox.com 下 载 。 搜 索 该 书 的 
ISBN(978-1-119-18131-6)， 可 在 第 9 章 的 下 载 部 分 找到 对 应 代码 。 


9.1 构建 一 个 铁人 三 项 赛 成 绩 网 站 


你 可 能 已 经 从 其 他 章节 的 一 些 示例 中 猜 到 ， 笔 者 正在 参与 铁人 
三 项 赛 。 尽 管 协助 径 赛 训练 的 网 络 应 用 程序 的 质量 非常 高 ， 但 大 部 
分 关于 赛事 注册 和 成 绩 公 布 的 网 站 都 还 停滞 在 至 少 10 年 前 的 状态 ， 
很 少 有 比赛 跟踪 网 站 对 不 同 赛事 的 成 绩 进 行 实时 跟踪 和 比较 。 

本 章 中 用 作 示 例 的 应 用 程序 是 此 类 Web 应 用 程序 的 一 个 非常 
简单 的 版 本 。 

整个 网 站 由 3 个 主要 子 网 站 组 成 : 

e@ 后 台 (back office), 管理 员 可 以 创建 比赛 、 输入 成 绩 、 注 册 运 

动员 ， 并 对 数据 进行 任何 手动 干预 操作 。 

e@ 公开 网 站 ,用户 可 以 报名 参赛 ,公众 可 以 跟踪 运动 员 的 成 绩 

并 查看 比赛 的 最 终 排名 。 
e 一 组 API， 可 以 通过 物 联网 设备 (例如 计时 地 毯 或 GPS 跟踪 
器 ) 调 用 以 更 新 赛 道中 运动 员 的 成 绩 或 位 置 。 

显然 ， 本 章 提供 的 示例 并 未 实现 该 项 目的 全 部 功能 集 ， 仅 用 于 
展示 开发 流程 和 本 书 中 所 介绍 技术 的 一 些 应 用 示例 。 

如 果 你 对 功能 完备 的 铁人 三 项 比赛 追踪 网 站 感 兴趣 ， 可 以 登录 笔 
者 的 GitHub 存储 库 http://github.com/simonech/TriathlonRaceTracking 
并 克隆 该 存储 库 。 


9.2 构建 后 台 网 站 


后 台 网 站 是 一 个 传统 的 Web 应 用 程序 ， 并 不 使 用 Angular 或 其 
他 单 页 面 应 用 程序 框架 。 它 使 用 Bootstrap 简化 网 站 界面 美化 工作 ， 
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并 使 用 ASPNET Core MVC 的 功能 (如 标签 帮助 程序 ) 简 化 重复 性 的 
编辑 屏幕 的 创建 。 

要 构建 这 个 项 目 ， 可 以 使 用 MVC 应 用 程序 项 目 模板 (图 9-1)。 
该 操作 建立 了 一 个 项 目 , 其 中 包含 了 MVC 项 目 需 要 的 所 有 依赖 项 。 


New ASP.NET Core Web Application - TiathlonRaceTracking To 
[NET Core v/aspNETCore20 ~|Leam more 
A project template for creating an ASPINET Core 
| 加 application with example ASPINET Core MVC Views and 
S 也 Controllers This template can also be used for RESTful 
Empty Web API web HTTP services. 
Application 
pd 
区 人 虹 
Reactjs Reactjsand 
be Change Authentication 


Authentication No Authentication 


DOD Enable Docker Support 


Os: Windows 


Requires Docker for Windows 
Docker support can also be enabled later Learn more 


9-1 选择 模板 


第 一 步 是 构建 后 台 网 站 的 总 体 布局 ， 以 及 访问 网 站 各 个 区 域 的 
菜单 。 项 目 模板 中 已 经 安装 了 Bootstrap， 因 此 为 网 站 的 各 种 功能 设 
计 菜 单 栏 十 分 简单 。 

菜单 将 包含 指向 后 台 各 个 部 分 的 链接 : 比赛 、 运 动员 和 成 绩 。 
代码 清单 9-1 中 展示 了 后 台 网 站 的 主 布 局 ， 包 括 导航 栏 和 项 目 模板 
添加 的 所 有 脚本 引用 。 


代码 清单 9-1: Views/Shared/_Layout.cshtml 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 


<meta name="viewport" content="width=device-width, initial- 
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scale=1.0" /> 
<title>@ViewData["Title"] - TriathlonRaceTracking</title> 


<environment include="Development"> 
<link rel="stylesheet" href="~/lib/bootstrap/dist/ 
css/bootstrap.css" /> 
<link rel="stylesheet" href="~/css/site.css" /> 
</environment> 
<environment exclude="Development"> 
<link rel="stylesheet" href="https://ajax.aspnetcdn. 
com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" 
asp-fallback-href="~/lib/bootstrap/dist/css/ 
bootstrap.min.css" 
asp-fallback-test-class="sr-only" asp-fallback- 
test-property="position" asp-fallback-test-value= 
"absolute" /> 
<link rel="stylesheet" href="~/css/site.min.css" asp- 
append-version="true" /> 
</environment> 
</head> 
<body> 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
<div class="container"> 
<div class="navbar-header"> 
<button type="button" class="navbar-toggle" 
data-toggle="collapse" data-target=".navbar- 
collapse"> 


<span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
<a asp-area="" asp-controller="Home" asp-action= 
"Index" class="navbar-brand">TriathlonRaceTracking 
</a> 
</div> 
<div class="navbar-collapse collapse"> 
<ul class="nav navbar-nav"> 
<li class="dropdown"> 
<a href="#" class="dropdown-toggle" 
data-toggle="dropdown">Races <span class= 
"caret"></span></a> 
<ul class="dropdown-menu"> 


<li><a asp-area="" asp-controller= 
"Races" asp-action="Create">Add Race 
</a></1i> 
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<1Li><a asp-area="" asp-controller= 
"Races" asp-action="Index">List Races 
</a></1i> 
</ul> 


</1i> 
<li class="dropdown" 
<a href="#" class="dropdown-toggle" data- 
toggle="dropdown">Athletes <span class= 
"caret"></span></a> 
<ul class="dropdown-menu"> 
<li><a asp-area="" asp-controller= 
"Athletes" asp-action="Create">Add 
Athlete</a></1i> 
<li><a asp-area: asp-controller= 
"Athletes" asp-action="Index">List 
Athletes</a></1i> 
</ul> 
</1i> 
<li><a asp-area="" asp-controller="Results" 
asp-action="Index">Results</a></1i> 
<li><a asp-area="" asp-controller="Home" 
asp-action="About">About</a></1i> 
</ul> 
</div> 
</div> 
</nav> 
<div class="container body-content"> 
@RenderBody () 
<he /> 
<footer> 
<p>&copy; 2017 - TriathlonRaceTracking</p> 
</footer> 
</div> 


<environment include="Development"> 
<script src="~/lib/jquery/dist/jquery.js"></script> 
<script src="~/lib/bootstrap/dist/js/bootstrap.js"> 
</script> 
<script src="~/js/site.js" asp-append-version= 
"true"></script> 
</environment> 
<environment exclude="Development"> 
<script src="https://ajax.aspnetcdn.com/ajax/jquery/ 
jquery-2.2.0.min.js" 
asp-fallback-src="~/1ib/jquery/dist/jquery. 
min.js™" 
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asp-fallback-test="window.jQuery" 
crossorigin="anonymous" 
integrity="sha384-K+ctZQ+LL8q6tP7I94W+ 
qzQsfRV2a+AfHIi9k8z819ggpc8X+Ytst4yBo/hH+8Fk"> 

</script> 

<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/ 

3.3.7/bootstrap.min.js" 
asp-fallback-src="~/l1ib/bootstrap/dist/js/ 
bootstrap.min.js" 
asp-fallback-test="window.jQuery && window. 
jQuery.fn && window.jQuery.fn.modal" 
crossorigin="anonymous" 
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfu 
WVxZxUPNCJA7T12mCWNIPpPG9mGCD8wGNIcPD7Txa"> 

</script> 

<script src="~/js/site.min.js" asp-append-version= 

"true"></script> 

</environment> 


@RenderSection("Scripts", required: false) 
</body> 
</html> 
使 用 Bootstrap 创建 的 导航 栏 直 接 链 接 到 控制 器 内 的 各 种 操作 。 
该 功能 是 利用 链接 标签 帮助 程序 实现 的 ， 后 者 只 需要 指定 链接 控制 
器 中 操作 的 名 称 ， 即 可 生成 对 应 的 操作 。 


<a asp-area="" asp-controller="Athletes" asp-action="New"> 
Add Athlete</a> 


除了 导航 栏 外 ， 代 码 清单 9-1 还 显示 了 许多 链接 标签 帮助 程序 
的 用 法 ， 例 如 用 于 依据 站 点 运行 环境 呈现 不 同 内容 的 environment， 
以 及 link，link 帮助 程序 添加 对 CDN( 或 者 本 地 ， 如 果 CDN 宕 机 ) 
的 JavaScript 或 CSS 文件 的 直接 引用 。 

下 面 的 示例 实现 列 出 、 创 建 和 编辑 比赛 的 界面 。 一 场 比 赛 是 由 
一 定数 量 的 文本 信息 和 一 系列 中 间 计 时 点 组 成 的 ， 每 个 计时 点 可 能 
定义 比赛 的 一 段 分 赛 道 。 为 开始 实现 工作 ， 首 先 需 要 设置 数据 库 。 
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9.2.1 设置 Entity Framework 

数据 持久 性 有 多 种 选择 。 可 以 使 用 像 Entity Framework 这 样 的 
ORM 连接 到 标准 的 SQL 数据 库 ， 也 可 以 使 用 文档 型 数据 库 。 对 于 本 
例 , 最 简单 的 解决 方案 是 使 用 Entity Framework Core( 也 称 为 EF Core)。 


1. 对 象 模型 


要 使 用 Entity Framework Core， 第 一 步 是 定义 应 用 程序 的 对 象 
模型 ， 而 不 必 担 心 如 何 创建 底层 数据 库 表 。 在 本 例 的 简单 场景 中 ， 
将 使 用 两 个 具有 一 对 多 关系 的 类 : 

e 一 个 Race 类 ， 其 中 存储 一 场 比赛 的 主要 信息 

e 一 个 TimingPoint 类 ， 用 于 指定 计时 地 毯 的 放置 位 置 

这 两 个 类 分 别 如 代码 清单 9-2 和 9-3 所 示 。 

代码 清单 9-2: Models/Race.cs 


using System; 
using System.Collections.Generic; 


namespace TriathlonRaceTracking.Models 
{ 
public class Race 
{ 
public int ID { get; set; } 
public string Name { get; set; } 
public string Location { get; set; } 
public DateTime Date { get; set; } 


public ICollection<TimingPoint> TimingPoints { get; set; } 
} 
代码 清单 9-3: Models/TimingPoint.cs 
namespace TriathlonRaceTracking.Models 
{ 
public enum TimingType 


{ 
Start, 
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SwimEnd, 
BikeStarty 
BikeEngd, 
RunSstart, 
End, 
Intermediate 


} 


public class TimingPoint 

{ 
public int ID { get; set; } 
public int RaceID { get; set; } 
public string Name { get; set; } 
public TimingType Type { get; set; } 


public Race Race { get; set; } 

} 

注意 ,比赛 和 其 计时 点 之 间 的 一 对 多 关系 是 通过 向 Race 对 象 中 
添加 一 个 TimingPoint 列表 ,并 在 TimingPoint 中 指定 RaceID， 以 及 
对 Race 对 象 的 实际 引用 定义 的 。 一 个 计时 点 可 以 定义 一 段 分 赛 道 的 
正式 开始 或 结束 ， 也 可 以 是 赛 道 中 的 一 圈 ， 或 者 其 他 任何 在 成 绩 这 
一 语 境 中 没有 意义 的 中 间 点 。 为 简单 起 见 ， 它 是 在 同一 个 文件 中 ， 
作为 一 个 枚 举 实现 的 。 

2. EF Core 上 下 文 


定义 了 对 象 模型 后 ， 需 要 在 Entity Framework 的 上 下 文 对 象 中 
注册 这 两 个 类 ， 该 对 象 充 当 数据 操作 的 单一 入 口 点 。 该 应 用 程序 的 
Entity Framework 上 下 文 如 代码 清单 9-4 所 示 。 

代码 清单 9-4: Data/TriathlonRaceTrackingContext.cs 

using Microsoft.EntityFrameworkCore; 

namespace TriathlonRaceTracking.Data 


{ 
public class TriathlonRaceTrackingContext : DbContext 


{ 
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public TriathlonRaceTrackingContext (DbContextOptions 
<TriathlonRaceTrackingContext> options) 
: base (options) 


public DbSet<TriathlonRaceTracking.Models.Race> Race 
{ get; set; } 


public DbSet<TriathlonRaceTracking.Models.TimingPoint> 
TimingPoint { get; set; } 


另外 ， 必 须 指定 连接 字符 串 并 将 其 传递 给 Startup 类 中 的 
ConfigureServices 内 的 上 下 文 对 象 。 


public void ConfigureServices(IServiceCollection services) 


i 


services.AddMvc (); 


services.AddDbContext<TriathlonRaceTrackingContext>( 
options => 
options.UseSqlServer( Configuration. 
GetConnectionString ("TriathlonRace-TrackingContext"))); 


连接 字符 串 可 在 appsettings.json( 见 代码 清单 9-5) 文 件 中 定义 。 


代码 清单 9-5: appsettings.json 


"Logging": { 
"IncludeScopes": false, 
"LogLevel": { 

"Default": "Warning" 

be 

"ConnectionStrings": { 
"TriathlonRaceTrackingContext": "Server=(localdb)\\ 
mssqllocaldb;Database=TriathlonRaceTrackingContext 
-19f£1651f-d333-4fel-9301-e75c84ec0b6e;Trusted Connection= 
True;MultipleActiveResultSets=true" 

} 
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上 下 文 类 的 创建 和 对 Startup.cs 以 及 appsettingsjson 文件 的 更 
改 ， 是 首次 在 Visual Studio 2017 的 “Add Controller( 添 加 控制 器 )” 
对 话 框 中 搭建 一 个 控制 器 时 自动 完成 的 。 


3. 迁移 


现在 需要 的 是 一 个 可 用 于 存储 EF Core 数据 的 数据 库 。 默 认 
情况 下 ，EF Core 从 与 类 同名 ， 且 表 中 列 名 与 属性 名 相同 的 表 中 
获取 数据 ， 填 充 数 据 模型 的 对 象 。 另 外 ， 它 预期 ID 是 主键 ， 表 示 
关系 的 所 有 信息 (如 代码 清单 9-3 中 的 RaceID) 都 是 外 键 。 最 简单 
的 根据 默认 映射 约定 创建 正确 的 表 和 键 的 方法 ， 是 使 用 称 为 迁移 
(migration) 的 功能 。 迁 移 可 用 于 首次 设置 数据 库 ， 但 在 后 续 开 发 
中 ， 添 加 需要 新 增 表格 (或 为 现 有 表格 新 增 属性 ) 的 功能 时 ， 该 操 
作 更 重要 。 

要 为 Race 和 TimingPoint 这 两 个 类 创建 基线 迁移 ， 首 先 需要 安 
装 Microsoft EntityFrameworkCore.Tools 包 。 

接 下 来 ， 需 要 运行 Add Migration 命令 ， 生 成 创建 数据 库 方 案 
的 代码 (该 代码 将 存储 在 Migrations 文件 夹 中 )， 然 后 执行 Update 
Database 命令 以 在 数据 库 上 运行 此 代码 。 

这 两 条 命令 可 在 Visual Studio 2017 的 包 管理 器 控制 台 运行 , 或 
使 用 dotnet 命令 行 工具 运行 。 

对 于 第 一 种 方法 ， 输 入 以 下 命令 : 


PM>Add-Migration Initial 
PM>Update-Database 


如 果 你 更 喜欢 使 用 dotnet 命令 行 , 在 命令 提示 符 中 输入 以 下 命令 : 


>dotnet ef migration Initial 
>dotnet ef database update 


这 只 是 对 Entity Framework 的 简要 介绍 ， 有 关 该 技术 已 有 多 本 
书籍 出 版 。 笔 者 希望 这 个 简短 的 介绍 有 助 于 你 掌握 构建 简单 应 用 程 


序 所 需 的 基础 知识 。 
另 一 个 耐人寻味 的 特性 是 可 以 使 用 初始 数据 对 数据 库 进行 “ 播 
种 ” 后 面 在 本 示例 应 用 程序 中 设置 数据 库 以 供 前 端 使 用 时 , 该 功能 
将 非常 有 用 。 
除了 添加 初始 数据 ， 还 可 以 直接 在 代码 中 运行 任意 待 进行 的 迁 
移 。 代 码 清单 9-6 中 展示 了 一 个 简单 的 数据 种 子 类 ， 它 添加 了 一 场 
比赛 及 其 计时 点 。 


代码 清单 9-6: Models/InitialData.cs 


using Microsoft.EntityFrameworkCore; 

using Microsoft.Extensions.DependencyInjection; 
using System; 

using System.Collections.Generic; 

using System.Linqg; 

using System.Threading.Tasks; 

using TriathlonRaceTracking.Data; 


namespace TriathlonRaceTracking.Models 
{ 
public static class InitialData 
{ 
public static async Task InitializeAsync 
(IServiceProvider service) 
{ 
using (var serviceScope = service.CreateScope ()) 
{ 
Var scopeServiceProvider = serviceScope. 
ServiceProvider; 
var db = scopeServiceProvider.GetService< 
TriathlonRaceTrackingContext> () 7 
db .Database.Migrate () : 
await InsertTestData (db) 


} 


private static async Task InsertTestData 
(TriathlonRaceTrackingContext context) 
{ 
if (context.Races.Any()) 
return; 
Var race = new Race { Name="Ironman World Championship 
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2017",Location="Kona, Hawaii",Date=new DateTime 
20L77r 10r1d 7 T0700 33 


var timingPoints = new List<TimingPoint> 

{ 
new TimingPoint{ Race=race, Name="Start", 
Type=TimingType.Sstart}, 
new TimingPoint{ Race=race, Name="Stairs", 
Type=TimingType.SwimEnd}, 
new TimingPoint{ Race=race, Name="T]1 Exit", 
Type=TimingType.BikeStart}, 
new TimingPoint{ Race=race, Name="Turnaround", 
Type=TimingType.Intermediate}, 
new TimingPoint{ Race=race, Name="T2 Entrance", 
Type=TimingType .BikeEnd}, 
new TimingPoint{ Race=race, Name="T2 Exit", 
Type=TimingType.Runstart}, 
new TimingPoint{ Race=race, Name="End", 
Type=TimingType .End} 

}; 


context.Add (race); 
context.AddRange (timingPoints); 
await context.SaveChangesAsync(); 


b 


这 段 代码 只 对 是 否 需要 添加 初始 数据 进行 非常 基本 的 检查 (if 
(context.Races.Any())),， 但 在 真实 应 用 程序 中 可 能 需要 更 精细 的 操作 。 

要 启动 此 过 程 ， 只 需要 从 Startup 类 的 Configure 方法 中 调用 
InitializeAsync 方法 即 可 : 


InitialData.InitializeAsync (app.ApplicationServices) .Wait () 


9.2.2 构建 CRUD 界面 
现在 数据 库 已 经 配置 完成 , 接 下 来 将 构建 控制 器 和 更 重要 的 视图 。 
首先 创建 RacesController。 如 果 使 用 Visual Studio 的 Add Controller 
向 导 ( 图 9-2 和 图 9-3)， 基 架 引 擎 将 创建 供 后 续 扩 展 和 构建 的 框架 
代码 。 


Add Scaffold 县 
natalled | 
Common 各 MVC Controller - Empty MVC Controller with views, using Entity 

Al Framework 
4 Me by Microsoft 
$s Mvc controller with read/write actions viooo 
Contraller 


A An MVC controller with actions and Razor 
[®) Mvec controller with views, using Entity Framework 


过 MvcControllerWithContextScaffolder 


Click here to go online and find more scaffolding extensions, 


ms [Leo | 
图 9-2 Add Scaffold( 添 加 基 架 ) 对 话 框 


警告 

在 此 示例 中 ， 来 自 实体 框架 的 模型 也 作为 发 送 到 视图 的 一 个 
ViewModel 对 象 使 用 。 这 样 做 的 目的 只 是 为 避免 代码 过 于 复杂 。 在 
真正 的 生产 级 应 用 程序 中 ， 可 能 希望 使 用 映射 库 ( 如 Automapper) 将 
两 个 模型 分 开 ， 并 将 属性 从 数据 模型 映射 到 ViewModel。 


Add Controller 


x 
Model class: Race (TriathlonRaceTracking Models) | 
Data context class。 | TriathlonRaceTrackingContext (TriathlonRaceTracking.Data) ES 
Views: 


回 Generate views 

回 | Reference script libraries 
Use a layout page: 

| | 


(Leave empty if it is set in a Razor _viewstart file) 


Controller name: RacesController 


Add Cancel 


9-3 Add Controller 对 话 框 


265 


266 


Web 前 端 开 发 一 一 使 用 ASPNET Core、Angular 和 Bootstrap 


下 一 步 是 检查 向 数据 库 添 加 一 场 新 比赛 所 需 的 代码 (包括 控制 
器 和 视图 中 的 代码 )。 此 操作 使 用 标准 模式 Post-Redirect-Get( 提 交 - 
重 定向 -获取 ), 来 避免 用 户 在 提交 表单 后 刷新 页 面 导致 的 数据 重复 : 
(1) 在 浏览 器 中 呈现 Create 表单 。 
(2) 用 户 输 入 数据 并 按 Submit 按钮 。 
(3) 使 用 POST HTTP 方法 将 表单 提交 给 控制 器 。 
(4) 控制 器 检查 数据 是 否 有 效 并 执行 以 下 操作 之 一 : 
e 如 果 数 据 有 效 ， 它 会 将 用 户 重 定向 到 随后 的 页 面 ， 在 本 示例 
中 是 Index 页 面 ， 该 页 面 是 使 用 GET 方法 请 求 得 到 的 。 
e 如 果 数 据 无 效 , 控制 器 将 重新 呈现 编辑 窗 体 并 突出 显示 校 验 
出 错 的 数据 项 目 。 


1. 控制 器 


Create 操作 需要 两 个 操作 方法 。 第 一 个 方法 简单 地 返回 空 编辑 
表单 。 


public IActionResult Create () 
{ 
return View(); 


} 


第 二 个 方法 仍 称 为 Create， 将 在 使 用 POST 提交 表单 时 调用 。 


[HttpPost] 
[ValidateAntiForgeryToken] 
public async Task<IActionResult> Create([Bind("ID,Name, 
Location,Date")] Race race) 
{ 
If (ModelState.IsValid) 
{ 
_context.Add (race); 
await _Ccontext .SaveChangesAsync (); 
return RedirectToAction (nameof (Index)); 
} 
return View(race) 7 
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生成 的 代码 包含 很 多 保护 应 用 程序 的 最 佳 实践 。 它 使 用 
ValidateAntiForgeryToken 属性 ， 以 检查 由 表单 标签 帮助 程序 添加 的 
令 牌 。 该 机 制 用 于 防止 跨 站 请 求 伪 造 攻击 (也 称 为 CSRF)。 

它 还 使 用 模型 绑 定 中 的 bind 属性 来 避免 重复 提交 。 这 可 以 防止 
恶意 用 户 自 改 请 求 ， 添 加 不 应 通过 编辑 表单 编辑 的 属性 。 当 数据 模 
型 直接 暴露 给 视图 而 不 是 使 用 一 个 特定 的 ViewModel 对 象 转达 时 ， 

然后 ， 该 操作 方法 继续 检查 请 求 的 有 效 性 ， 将 该 对 象 添加 到 数 
据 库 ， 最 后 将 其 重 定向 到 呈现 比赛 列表 的 Index 操作 方法 。 


2. 视图 


Create 视图 (如 代码 清单 9-7 所 示 ) 比 Action 方法 更 加 耐人寻味 。 
代码 清单 9-7: Views/Races/Create.cshtml 
@model TriathlonRaceTracking.Models.Race 


@{ 
ViewData["Title"] = "Create"; 


} 
<h2>Create</h2> 


<h4>Race</h4> 
<hr /> 
<div class="row"> 
<div class="col-md-4"> 
<form asp-action="Create"> 
<div asp-validation-summary="ModelOnly" class="text- 
danger"></div> 
<div class="form-group"> 
<label asp-for="Name" class="control-label"> 
</label> 
<input asp-for="Name" class="form-control" /> 
<span asp-validation-for="Name" class="text- 
danger"></span> 
</div> 
<div class="form-group"> 
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<label asp-for="Location" class="control- 
label"></label> 

<input asp-for="Location" class="form-control" /> 
<span asp-validation-for="Location" class= 
"text-danger"></span> 


</div> 
<div class="form-group"> 


<label asp-for="Date" class="control-label" 
></label> 
<input asp-for="Date" class="form-control" /> 
<span asp-validation-for="Date" class="text- 
danger"></span> 

</div> 


<div class="form-group"> 


<input type="submit" value="Create" class="btn 
btn-default" /> 


</div> 


</form> 


</div> 
</div> 


<div> 


<a asp-action="Index">Back to List</a> 


</div> 


@section Scripts { 
@{await Html.RenderPartialAsync(" ValidationScriptsPartial");} 


} 


如 第 1 章 所 示 ，ASPNET Core MVC 引入 了 标签 帮助 程序 ， 使 
编写 视图 更 加 容易 。 这 是 使 用 表单 、 标 签 、 输 入 和 验证 帮助 程序 的 
一 个 例子 。 只 需要 通过 添加 asp-for 或 asp-validation-for 属性 ， 标 准 
HTML 标签 就 会 感知 到 ViewModel 并 呈现 属性 的 值 。 如 有 必要 ， 还 
能 呈现 基于 Bootstrap 的 验证 框架 所 需 的 HIML 属性 。 

Bootstrap 也 得 到 广泛 使 用 。 注 意 .col-md-4 类 名 用 于 指示 网 格 仅 
使 用 12 列 中 的 4 列 来 浑 染 此 表单 (因此 只 使 用 页 面 宽 度 的 三 分 之 一 )。 


该 表单 使 月 


肯 Bootstrap 类 进行 样式 设置 ， 使 用 .form-group 来 定 


义 窗 体 的 单独 元 素 , 并 使 用 .form-control 标识 实际 输入 字段 。 最 后 ， 
还 使 用 Bootstrap 中 的 btn btn-default 类 对 按钮 进行 样式 设置 。 有关 
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使 用 Bootstrap 的 表单 的 更 多 格式 化 选项 ， 可 参考 第 4 章 和 代码 清 
单 4-6。 


9.3 构建 注册 页 面 


在 后 台 网 站 有 人 创建 了 比赛 。 现 在 该 到 运动 员 注 册 的 时 候 了 。 
对 于 此 功能 ， 用 户 能 够 使 用 Facebook 或 Twitter 等 社交 媒体 登录 信 
息 进行 登录 ， 在 注册 后 ， 他 们 就 可 以 选择 参加 哪 一 场 比 赛 。 

为 此 将 创建 一 个 新 的 Visual Studio 项 目 ， 但 希望 继续 使 用 
相同 的 Entity Framework 数据 模型 ， 因 此 需要 重 构 该 解决 方案 并 
将 所 有 与 EF 相关 的 类 移 至 一 个 单独 的 类 库 项 目 。 在 创建 了 项 目 
并 且 将 Data 和 Model 文件 夹 的 所 有 内 容 移 至 新 项 目 后 ， 必 须 引用 
EntityFrameworkCore 和 EntityFrameworkCore.SqlServer 这 两 个 
NuGet 包 。 之 前 没 必 要 这 样 做 ， 因 为 它们 是 ASPNET Core MVC 项 
目 中 使 用 的 大 型 软件 包 Microsoft.AspNetCore.All 的 一 部 分 。 此 外 ， 
还 需要 像 在 后 台 网 站 项 目 中 一 样 ， 配 置 appsettings.json 文件 和 
Startup 类 。 

使 用 ASPNET Core 添加 社交 媒体 身份 验证 非常 简单 。 首 先 创 
建 另 一 个 项 目 ， 仍 然 是 一 个 ASPNET Core MVC 项 目 ， 然 后 选择 
Individual User Accounts 作为 身份 验证 模式 。 这 样 , 项 目 模板 将 添加 
数据 库 实 体 、 控 制 器 和 视图 ， 它 们 用 于 收集 和 存储 创建 一 个 私有 站 
点 需要 的 所 有 信息 , 在 该 站 点 中 用 户 可 以 直接 注册 (提供 用 户 名 和 密 
码 ) 或 通过 OAuth 提供 程序 (如 Facebook Twitter 谷歌 .微软 .GitHub 
等 ) 注 册 。 

添加 一 种 社交 网 站 登录 方式 只 需要 添加 正确 的 NuGet 包 并 在 
Startup 类 的 ConfigureService 方法 中 配置 其 身份 验证 提供 程序 即 
可 。 例 如 , 要 添加 Facebook 登录 , 请 添加 NuGet 软件 包 Microsoft. 
AspNetCore.Authentication.Facebook， 然 后 在 ConfigureService 方法 中 
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添加 以 下 代码 行 : 


services.AddAuthentication() .AddFacebook 
(facebookOptions => 


{ 
facebookOptions.AppId = Configuration 


["Authentication:Facebook:AppId"]; 
facebookOptions.AppSecret = Configuration 
["Authentication:Facebook:AppSecret"]; 

ys 
现在 ， 必 须 在 Facebook 开发 者 门户 (developer portal) 上 注册 一 
个 新 应 用 程序 ， 以 获取 在 Facebook 验证 你 的 应 用 程序 所 需 的 AppId 
和 AppSecret。 转 到 URL https://developers.facebook.com/apps/ 并 单 击 
Add a New App 按钮 (如 图 9-4 所 示 )。 


focebook for developers 


Products Docs Tools&Support News Videos 


Qsearch apps by tite 


9-4 ”Facebook 开发 者 门户 
然后 输入 应 用 程序 的 名 称 和 你 的 E-Mail 地 址 (如 图 9-5 所 示 )。 


Create a New App ID 


Get started integrating Facebook into your app or website 
Display Name 
The name you want to associate with this App ID 


Contact Email 


Used for important communication about your apF 


By proceeding, you agree to the Facebook Platform Policies Cancel 


9-5 创建 新 的 App ID 
然后 选择 Facebook Login 作为 要 设置 的 产品 (如 图 9-6 所 示 )。 


Facebook Login 


The world's number one social login 
product. 


Read Docs Set Up 


图 9-6 选择 要 设置 的 产品 


将 跳 过 弹出 的 向 导 , 此 时 从 左 侧 边栏 中 选择 Settings。 在 此 页 面 
See 录 路 径 /signin-facebook 的 绝对 URL 地 址 。 该 路 径 已 由 
NuGet 包 添 加 。 保 持 所 有 其 他 设置 不 变 ( 如 图 9-7 所 示 )。 

最 后 一 件 事 是 检索 应 用 程序 工作 所 需 的 AppId 和 AppSecrets。 
为 此 ， 请 转 到 开发 者 门户 内 的 Dashboard 页 面 (如 图 9-8 所 示 )。 


Client OAuth Settings 


图 9-7 OAuth 设置 页 
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Dashboard 
myawesomeapp - 
人 
v0 "= 
于 App Secret 
有 EC 


图 9-8 Dashboard 


现在 可 将 它们 保存 在 appsettings.json 文件 中 ， 或 使 用 用 户 机 密 
管理 功能 。 第 二 种 选择 更 好 ， 因 为 它 将 配置 存储 在 应 用 程序 文件 夹 
之 外 (位 于 用 户 的 配置 文件 中 )， 并 避免 了 在 源 存储 库 中 存储 社交 登 
录 密 钥 和 秘密 等 敏感 信息 的 常见 错误 。 图 9-9 展示 了 如 何 通 过 
Solution Explorer 中 的 项 目 节点 上 的 Manage User Secrets 上 下 文 菜 
单项 ， 从 Visual Studio 打开 用 户 密 钥 文件 。 


ET 了 是 s es 名 名 -|e-s 昌 加 | 2 


Search Solution Explorer (Ctrl+ 


+ 名 solution TriathlonRaceTracking (4 projec| 
as 四 Data 


@ Publish.. 

Overview 

Scope to This 
加 New Solution Explorer View 
© EditRegistration.csproj 


Migrations 
+ ce 00000000000000_Createlde! 
+ ce ApplicationDbContextMode| 
ApplicationDbContextcs 

Build Dependencies ,| 

Add » 
Manage NuGet Packages 

Manage Bower Packages.. 

Manage User Secrets 『 appsettings Developmentjson 
owerjson 

ndleconfigjson 


Set as StartUp Project 
Debug » 

% cut Ctrl+X 
Unload Project 

© Open Folder in File Explorer 


lonRaceTracking 


Properties 


9-9 Manage User Secrets 菜单 项 


272 


第 9 章 综合 运用 


接 下 来 在 secrets.json 文件 中 输入 以 下 配置 (显然 , 要 用 自己 应 用 
程序 的 值 代 奉 占 位 符 ): 


{ 


"Authentication": { 
"Facebook": { 
"AppId": "myappId", 
"AppSecret": "myappsecret" 


} 
} 
} 
现在 运行 项 目 并 进入 登录 页 ， 即 可 看 到 文字 Use another service 
to log in 下 方 有 一 个 新 按钮 ， 如 图 9-10 所 示 。 
[ET | 


Login 
Use a local account to log m Use anoher sevice to log in 
--. Facebook 


图 9-10 项 目 登录 页 


此 时 ， 在 用 户 完成 了 系统 身份 验证 后 ， 即 可 通过 一 个 页 面 提示 
他 们 注册 参加 比赛 。 


9.4 ”展示 实时 成 绩 


在 前 两 个 示例 中 ， 与 数据 的 交互 相对 简单 ， 本 示例 则 要 复杂 一 
些 , 将 展示 实时 成 绩 。 为 此 , 将 配合 使 用 Angular 以 及 一 些 Web API 
从 数据 库 中 检索 数据 。 
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9.4.1 创建 Angular 客户 端 程序 

对 于 本 网 站 ， 可 以 使 用 Visual Studio 2017 提供 的 Angular 项 目 
模板 。 这 将 使 用 第 3 章 末尾 提 到 的 JavaScript 服 务 设置 项 目 (如 图 9-11 
所 示 )。 


.NET Core ~ || ASP.NET Core 2.0 


Li mor 
A project template for creating an ASP.NET Core 
application with Angular 
习 回 加 加 攻 量 rr 
Empty Web AP web web Angular Lesm more 
Appl Application 
Model-View- 
Controllen 


Reactjs Reactjsand 
Redux 


Change Authentication 


Authentication No Authentication 


OK Cancel 


9-11 使 用 Angular 模板 


该 应 用 程序 的 架构 非常 简单 。Web 服务 将 运动 员 的 所 有 计时 点 
列表 发 送 到 JavaScript 前 端 ， 然 后 将 其 显示 出 来 ， 供 应 用 过 滤器 以 
及 分 析 统 计数 据 。 如 第 3 章 所 述 ， 前 端 是 通过 一 组 特定 的 Angular 
组 件 和 服务 实现 的 。 最 终结 果 如 图 9-12 所 示 。 

与 任何 较 大 的 Angular 应 用 程序 一 样 ， 这 个 应 用 程序 由 一 系列 
组 件 组 成 。 

根 元 素 是 Results 组 件 , 它 负责 页 面 的 总 体 布局 以 及 处 理子 组 件 之 
间 的 交互 。 代 码 清单 9-8 显示 了 TypeScript 文件 和 HIML 模板 文件 。 


国 ee re * 一 J 


e 


口 份 。 Oocanos 让 | 大 各 


Kona Ironman Top 5 men 


Positon Name Nationaliy Start Stars 。 TIEx Tumaround T2Entrance T2Ext End Total 
1 Patick Lange 。 DEU 0000:00 004845 005034 051927 052141 080140 08.01.40 
5 2 Lonel Sanders 。 CAN 000000 00:53:41 00.5539 050958 2 05:12:14 080407 080407 
3 Davd Menamee = GER 00.00.00 004840 005043 051938 052141 080711 0807:11 


4 si 


n Kienle -DEU 000000 00:53:44 00.55:42 051039 051248 08:09:59 06:09:59 


5 James Cunnama ZAF 000000 00:49:09 00.5120 051222 2 05:14:38 08:11:24 08:11:24 


You selected: 


Patrick Lange (DEU) 


Finat ume: uaunau 


图 9-12 成 绩 列表 


代码 清单 9-8: Results 组 件 


模板 文件 


<h1>Kona Ironman Top 5 men</h1> 
<results-list (selected)=showDetails ($event)>Loading athlete 
list...</results-list> 
You selected: <app-athlete-details [athlete]="selectedAthlete"> 
</app-athlete-details> 


TypeScript 文件 


import { Component } from '‘'@angular/core'; 
import { Athlete } from './athlete'; 


@Component ({ 
selector: 'results', 
templateUrl: '‘'results.component.html' 
} 
export class ResultsComponent { 
selectedAthlete: Athlete; 


showDetails(selectedAthlete: Athlete) { 
this.selectedAthlete = selectedAthlete; 
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该 组 件 包含 两 个 子 组 件 。 它 处 理 成 绩 列 表 的 选 定 事件 ， 以 向 用 
户 显示 成 绩 列表 的 详细 信息 。 

第 一 个 子 组 件 是 results-list, 用 于 构建 包含 成 绩 列表 的 表 ， 如 代 
马 清单 9-9 所 示 。 该 表 使 用 Bootstrap 的 table 类 来 创建 一 个 带 边 框 
的 表格 ， 并 突出 显示 鼠标 指针 所 在 的 行 。 


代码 清单 9-9: results-list.component.html 


<table class="table table-bordered table-hover"> 
<tr> 
<th>Position</th> 
<th>Name</th> 
<th>Nationality</th> 
<th *ngFor="]let point of timingPoints">{{point.name}} 
</th> 
<th>Total</th> 
</tr> 
<tr app-athlete *ngFor="1let athlete of athletes | slice: 
0:5;let i = index"> 
(click)="select (athlete)" 
[athlete]="athlete" 
[timingPoints]="timingPoints" 
[position]="i+1"> 
</tr> 
</table> 


该 表 的 表 头 也 是 动态 构建 的 ， 每 个 比赛 中 间 点 将 添加 一 列 。 显 
然 ， oe aid athletes 属性 ， 该 属性 包含 参 
加 比赛 的 所 有 运动 员 的 列表 。 注 意 使 用 了 管道 slice:0:5， 以 只 显示 
前 五 名 运动 员 。 最 后 这 部 分 是 需要 大 部 分 代码 的 环节 。 处 理 这 个 模 
板 的 TypeScript 类 如 代码 清单 9-10 所 示 。 


代码 清单 9-10: results-list.component.ts 


import { Component, Output, EventEmitter, OnInit } from 
'@angular/core'; 

import { AthleteService } from './athlete.service'; 
import { Athlete } from "./athlete"; 

import { TimingPoint } from "./TimingPoint"; 

import { Observable } from "rxjs/Observable"; 


小 
oO 
贿 
游 
wD 
[el 
涯 


@Component ({ 
selector: 'results-list', 
templateUrl: 'results-list.component.html' 

} 

export class ResultsListComponent implements OnInit { 
athletes: Athlete[]; 
timingPoints: TimingPoint[]; 
@Output() selected = new EventEmitter<Athlete>(); 
constructor (private athleteService: AthleteService) { } 


getAthletes() { 
this.athleteService.getAthletes () 
.then(list => { 
for (var i = 0; i < list.length; i++) { 

var athlete = list([i] 

athlete.timingValues 

string>(); 

for (var ] = 0; j < athlete.timings.length; 

j++) { 
athlete.timingValues.set (athlete.timings[j]. 
code, athlete.timings[j] .time); 


new Map<string, 


} 
this .athletes = list; 


1D); 


getTimingPoints() { 
this .athleteService.getTimingPoints () 
-then (1ist => this.timingPoints = list); 


ngonInit() { 
this.getAthletes(); 
this.getTimingPoints(); 


select (selectedAthlete: Athlete) { 
this.selected.emit (selectedAthlete); 


该 实现 与 第 3 章 末 尾 给 出 的 实现 非常 相似 在 ngOnInit 事件 期 间 ， 
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运动 员 和 中 间 计 时 点 的 列表 是 通过 调用 一 个 外 部 服务 (AthleteService) 
检索 的 , 该 外 部 服务 负责 向 Web API 发 送 实际 HTTP 请 求 。 在 
getAthletes 方法 中 ， 处 理 来 自 服务 的 响应 并 稍 加 解析 ， 以 便 构 造 
ViewModel， 该 对 象 是 便捷 地 呈现 模板 所 需 的 。 


组 件 图 形 中 的 最 后 一 个 元 素 用 于 呈现 成 绩 表 格 的 各 行 ， 如 代码 


清单 9-11 所 示 。 
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代码 清单 9-11: Athlete.Component 


模板 文件 


<td>{ {position}}</td> 

<td>{{athlete.name}}</td> 

<td>{{athlete.country}}</td> 

<td *ngFor="let timing of timingPoints"> 
{{athlete.timingValues.get (timing.code)}} 

</td> 

<td>{{athlete.time}}</td> 


TypeScript 文 件 


import { Component, Input } from '‘'@angular/core'; 
import { Athlete } from './athlete'; 
import { TimingPoint } from './timingpoint'; 


@Component ({ 
selector: 'tr[app-athlete]', 
templateUrl: ‘athlete.component.html' 
} 
export class AthleteComponent { 
QInput () athlete: Athlete; 
@Input() position: string; 
QInput () timingPoints: TimingPoint[]7 
constructor() { } 


, 


同样 在 这 本 例 中 ， 模 板 欠 代 处 理 中 间 计 时 点 列表 并 显示 运动 员 


在 该 特定 点 的 计时 。 加 粗 显示 的 语句 用 于 处 理 来 自 服务 器 的 成 绩 数 
据 ， 将 在 接 下 来 的 “构建 Web API” 一 节 中 探讨 。 
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该 组 件 无 法 知道 它 在 哪个 位 置 进行 呈现 ， 因 此 ， 为 了 呈现 运动 
员 的 位 置 ， 它 具有 一 个 由 父 组 件 提供 的 称 为 position 的 输入 参数 。 

程序 缺少 的 最 后 一 部 分 是 实际 调用 服务 器 的 服务 。 它 很 简单 ， 
如 代码 清单 9-12 所 示 。 


代码 清单 9-12: athlete.service.ts 


import { Injectable } from '@angular/core'; 
import { TimingPoint } from './TimingPoint'; 
import { Athlete } from './athlete'; 


import { Http, Response } from "@angular/http"; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/toPromise'; 


@Injectable() 
export class AthleteService { 
constructor (private http: Http){} 


getAthletes (){ 
return this.http.get ('/api/standings') 
.map((r: Response) => <Athlete[]>r.json() .data) 
.toPromise(); 


} 


getTimingPoints() { 
return this.http.get('/api/timingpoints') 
.map((r: Response) => <TimingPoint[]>r.json()) 
.toPromise(); 
} 
} 


接 下 来 构建 将 数据 返回 给 Angular 客户 端 应 用 程序 的 Web API。 


9.4.2 构建 Web API 

返回 结果 列表 是 非常 简单 的 操作 。 其 唯一 的 复杂 性 是 计算 各 个 
计时 点 的 中 间 计时 。 在 本 示例 程序 中 ， 制 作 了 两 个 API。 第 一 个 将 
所 有 注册 计时 点 的 列表 发 送 给 Angular 客户 端 ， 以 让 它 将 列表 显示 
在 结果 列表 的 标题 中 ， 如 代码 清单 9-13 所 示 。 
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代码 清单 9-13: Controllers/TimingPointsController.cs 


using System.Collections.Generic; 
using System.Linqg; 

using Microsoft.AspNetCore.Mvc; 
using Frontend.ViewModels; 

using Frontend.Services; 


namespace Frontend.Controllers 
{ 
[Produces ("application/json")] 
[Route ("api/TimingPoints")] 
public class TimingPointsController : Controller 


{ 


private readonly ITimingService service; 


public TimingPointsController (ITimingService service) 


{ 


_service = service; 
} 
[HttpGet] 
public IList<TimingPointDefinition> Get() 
{ 


var data = _service.GetTimingPoints (1); 


Var model = data.Select (tp => new TimingPointDefinition 
{ 

Code = tp.Code, 

Name = tp.Name, 

Order = tp.ID 
}) eToLiast(); 


return model; 


第 二 个 Web API 用 于 提供 比赛 中 的 所 有 运动 员 以 及 所 有 中 间 计 
时 点 。 在 本 例 中 ， 控 制 器 非常 简单 ， 因 为 它 将 计算 中 间 计 时 的 复杂 
操作 委托 给 通过 DI 注入 的 服务 TimingService。 这 个 简单 的 API 如 
代码 清单 9-14 所 示 。 
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代码 清单 9-14: Controllers/StandingsController.cs 


using Frontend.Services; 

using Frontend.ViewModels; 

using Microsoft.AspNetCore.Mvc; 
using System; 

using System.Collections.Generic; 
using System.Linqg; 

using System.Threading.Tasks; 
using TriathlonRaceTracking.Data; 


namespace Frontend.Controllers 
{ 
[Route ("api/[controller]")] 
public class StandingsController : Controller 


{ 
private readonly ITimingService service; 


public StandingsController (ITimingService service) 


{ 


_service = service; 


[HttpGet] 
public AthletesViewModel Get() 
{ 


var data = _service.GetStandings (1); 


Var model = new AthletesViewModel (data); 
return model; 


如 你 所 见 ， 代 码 清单 9-14 中 没有 太 多 内 容 。 实 际 的 计算 发 生 在 
服务 中 (代码 清单 9-15)。 


代码 清单 9-15: Services/TimingService.cs 


using Frontend.ViewModels; 

using Microsoft.EntityFrameworkCore; 
using System; 

using System.Collections.Generic; 
using System.Linqg; 
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using System.Threading.Tasks; 
using TriathlonRaceTracking.Data; 
using TriathlonRaceTracking.Models; 


namespace Frontend.Services 


| 


public class TimingService : ITimingService 


{ 


private readonly TriathlonRaceTrackingContext context; 
public TimingService (TriathlonRaceTrackingContext context) 


{ 


_Context = context; 


public IList<AthleteViewModel> GetStandings (int raceId) 


{ 


var data = context.Registrations 


-Include(r => r.Timings) 
-ThenInclude (t => t.TimingPoint) 

.Include (上 => .Athlete) 

.Where ( => .RaceID == TraceId) 


Var result = new List<AthleteViewModel>(); 
foreach (var position in data) 


{ 


var athleteVM = new AthleteViewModel (position. 
Athlete.FullName, position.Athlete.Nationality); 


if (position.Timings.Count == 0) 
{ 
athleteVM.Time = "DNS"; 
} 
else 


{ 
var start = position.Timings.Where(t => 
t.TimingPoint.Type == TimingType.SsStart). 
Max(t => t.Time); 
var furthestPosition = GetFurthestPosition 

(position.Timings); 

athleteVM.Time = TimeFromStart (start, 
furthestPosition) .ToString() 7 
athleteVM.Timings = position.Timings.Select 
(t => new TimingPointViewModel 


和 


Time = TimeFromStart (start, t), 
Order = (int)t.TimingPoint.Type, 
Name = t.TimingPoint.Name 


小 
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} 


result.Add (athleteVM) 
} 


return result; 


} 


private static TimeSpan TimeFromStart (DateTime start, 
Timing timingPoint) 
{ 

return timingPoint.Time.Subtract (start); 


FE 


private Timing GetFurthestPosition (List<Timing> timings) 
{ 

Timing furthest = new Timing() { ID = -1 }; 

foreach (var timing in timings) 

{ 

if (timing.TimingPointID > furthest. TimingPointID) 
furthest = timing; 
} 


return furthest; 


} 


public IQueryable<TimingPoint> GetTimingPoints (int raceId) 
{ 


return context.TimingPoints.Where (tp => tp.RaceID 
== raceld); 


} 


GetStandings 方法 首先 检索 所 有 参加 比赛 的 运动 员 , 并 将 他 们 
的 所 有 中 间 计 时 以 及 详细 信息 加 入 其 中 。 之 后 ， 它 会 查询 各 次 出 发 
的 时 间 ( 现 在 许多 比赛 的 开始 时 间 对 于 每 个 运动 员 都 不 同 )， 并 确定 
与 各 中 间 计 时 的 差 值 ， 以 获得 各 个 分 段 的 计时 。 最 后 ， 它 将 所 有 数 
据 返回 给 控制 器 ， 以 将 其 发 送 回 Web 浏览 器 。 
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9.5 ”使 用 物 联网 设备 连接 


没有 人 会 坐 在 笔记 本 计算 机 前 ， 等 着 在 运动 员 通 过 某 个 时 间 点 
的 瞬间 输入 数据 。 这 项 任务 留 给 了 计算 机 完成 ， 它 可 以 感知 穿戴 
RFID 芯片 的 运动 员 穿 越 计时 地 毯 的 时 间 。 这 些 信 息 需 要 发 送 到 服 
务 器 ， 以 便 显示 运动 员 的 实时 状态 。 

实现 跟踪 运动 员 的 完整 解决 方案 非常 复杂 ， 但 在 此 只 需要 创建 
接收 原始 数据 的 API， 稍 后 将 使 用 REST 客户 端 模拟 器 模拟 调用 来 
测试 它 。 

可 通过 一 个 API 控制 器 来 执行 此 操作 ， 该 控制 器 会 接收 运动 员 
的 比赛 编号 、 某 些 比赛 和 计时 点 标识 符 以 及 时 间 信 息 。 该 API 如 代 
码 清 单 9-16 所 示 。 


代码 清单 9-16: Controllers/TimingsController.cs 


using System; 

using System.Collections .Genericy; 
using System.Linqg; 

using System.Threading.Tasks; 

using Microsoft.AspNetCore.Http; 
using Microsoft.AspNetCore.Mvc; 
using Microsoft.EntityFrameworkCore; 
using TriathlonRaceTracking.Data; 
using TriathlonRaceTracking.Models; 


namespace TriathlonRaceTracking.Controllers 
{ 
[Produces ("application/json")] 
[Route ("api/Timings")] 
public class TimingsController : Controller 
{ 


private readonly TriathlonRaceTrackingContext _context; 


public TimingsController (TriathlonRaceTrackingContext 
context) 
. 

_Context = context; 


. 


// GET: api/Timings/5 
[HttpGet ("{id}")] 
public async Task<IActionResult> GetTiming ([FromRoute] 
int id) 
{ 

if (!ModelState.IsValid) 

{ 

return BadRequest (ModelState); 


var timing = await context.Timings.SingleOrDefaultAsync 
(m => m.ID == id); 


if (timing == null) 
{ 


return NotFound(); 


return Ok(timing); 


// POST: api/Timings 
[HttpPost] 
public async Task<IActionResult> PostTiming ([FromBody] 
TimingPostModel model) 
{ 

if (!ModelState.IsValid) 

{ 

return BadRequest (ModelState); 


var registration = context.Registrations. 
SingleOrDefault (r => r.BibNumber == model .BibNumber 
&& r-RaceID == model.RacelId); 

var timingPoint = context.TimingPoints. 
SingleOrDefault (tp => tp.Code.Equals (model .TPCode) 
&& tp.RaceID == model.RacelId); 

var timing = new Timing 


{ 
RegistrationID=registration.ID, 
TimingPointID=timingPoint.ID, 
Time=model .Time 
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_context .Timings.-RAdd (timing) 7 
await _Context .SaveChangesAsync (); 


return CreatedAtAction("GetTiming", new { id = 
timing.ID }, timing); 


: 


public class TimingPostModel 

{ 
public int BibNumber { get; set; } 
public int Raceld { get; set; } 
public string TPCode { get; set; } 
public DateTime Time { get; set; } 


} 


此 处 没有 什么 特别 复杂 的 问题 ， 但 有 一 些 值得 注意 的 要 点 。 最 
重要 的 是 PostTiming 方法 不 使 用 Timing 对 象 作 为 输入 参数 ， 而 是 
作为 post 模型 。 原 因 除 了 避免 可 能 的 重复 post 之 外 ,是 因为 计时 点 
上 的 计时 设备 不 知道 数据 库 中 使 用 的 ID, 但 很 可 能 使 用 其 他 代码 并 
且 肯 定 知道 运动 员 的 比赛 号 码 。 

另 一 个 要 素 是 使 用 了 CreatedAtAction, 它 将 使 RESTAPI 返回 201 
HTTP 代码 ， 该 代码 通常 用 于 通过 REST 调用 创建 一 个 新 对 象 时 。 

由 于 并 没有 连接 到 系统 的 真实 计时 点 ， 因 此 可 以 使 用 任何 
REST 客户 端 测试 REST 端点 。 笔 者 喜欢 使 用 Postman， 它 既 可 以 作 
为 Google Chrome 扩展 程序 , 也 可 以 作为 一 个 独立 的 应 用 程序 使 用 。 

可 以 直接 在 JSON 中 指定 请 求 正 文 并 将 请 求 发 送 到 服务 器 。 请 
求 主 体 必 须 是 TimingPostModel 类 的 JSON 表述 ， 例 如 : 


{ 
"bibNumber": 1, 
raceld”: 1 
“en "2017=10-08T20:49:54.7302Z", 
BCOdee "TF1S" 
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Postman 能 够 在 执行 请 求 之 前 执行 一 些 JavaScript 格式 的 脚本 ， 
因此 可 以 用 一 个 包含 执行 请 求 时 的 精确 时 刻 的 变量 替换 硬 编码 的 时 
间 惟 。 这 样 就 能 方便 地 测试 API， 而 不 必 每 次 都 更 改 tme 参数 。 只 
需要 将 以 下 代码 行 添加 到 “Pre-request Script( 请 求 前 脚本 )” 选 项 卡 
中 即 可 实现 该 功能 : 


postman.setGlobalVariable('timestampUtcIso8601', (new Date()). 
七 ISOString()) 7 


然后 用 变量 {{timestampUtcIso8601}} 替换 时 间 参 数 。 已 准备 好 
向 系统 添加 新 的 定时 信息 的 Postman 请 求 构造 器 界面 ， 如 图 9-13 
所 示 。 


PosT hapy 


9-13 ”Postman 请 求 构造 器 界面 
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9.6 部署 


项 目 己 经 开发 完毕 ， 现 在 该 发 布 它们 ， 让 参加 铁人 三 项 赛 的 运 
动员 在 线 注 册 比 赛 。 为 此 ， 将 在 Azure 上 部 署 这 些 项 目 。 

第 7 章 中 已 包含 了 部 署 网 站 的 分 步 流 程 ， 所 以 在 此 将 不 再 详细 
解释 步 又， 仅 强 调 一 些 要 点 。 

首先 发 布 后 台 网 站 。 在 阅读 发 布 对 话 框 时 ， 笔 者 建议 创建 一 
个 这 组 应 用 程序 专用 的 资源 组 。 除 了 图 7-12 和 图 7-13 所 示 的 内 容 
之 外 ,， 还 必须 创建 一 个 数据 库 服务 器 (如 有 必要 ) 和 一 个 SQL 数据 
库 。 包 含 用 于 创建 数据 库 和 服务 器 的 表单 的 两 个 对 话 框 如 图 9-14 
所 示 。 


x x 
Configure SQL Server Configure SQL Database 
Create a SQL Database in your subscription for storing data used by Create a SQL Database in your subscription for storing data used by 
your application. your application. 
SQL Server 
triathlonracetracking20171217052316dbsever” * New 
Admvnatrator Username 


Database Name 


ok cancel | ok Cancel 


图 9-14 ”服务 器 和 数据 库 创建 对 话 框 


发 布 过 程 完成 后 ， 仍 然 有 一 个 小 细节 需要 更 改 。 在 用 于 创建 
数据 库 的 对 话 框 中 ， 保 持 了 DefaultConnection 作为 连接 字符 串 的 
名 称 ， 未 加 更 改 。 现 在 ， 必 须 进 入 Azure 门户 上 的 应 用 程序 设置 页 
面 (如 图 9-15 所 示 )， 并 将 其 更 改 为 应 用 程序 使 用 的 实际 连接 字符 串 
名 称 ， 即 TriathlonRaceTrackingContext， 如 代码 清单 9-4 所 示 。 
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9-15 ”Azure 门户 的 连接 字符 串 设置 


接 下 来 只 需要 浏览 到 Azure 应 用 程序 服务 的 URL, Entity Framework 
Core 会 自动 创建 数据 表 ， 并 使 用 InitialData.cs 文件 中 描述 的 数据 填 
充 它们 

部 署 完 后 台 网 站 后 ， 就 应 部 署 基于 Angular 的 前 端 。 只 需要 按照 之 
前 的 步骤 操作 ， 但 选择 已 有 的 资源 组 ， 而 不 必 新 建 一 个 。 此 外 ， 不 要 新 
建 SQL 数据 库 ， 因 为 该 应 用 程序 使 用 与 后 台 网 站 相同 的 数据 库 。 

对 于 本 应 用 程序 ， 必 须 手 动 设置 连接 字符 串 。 请 从 后 台 网 站 的 
配置 中 复制 该 值 。 

前 端 应 用 的 发 布 耗 时 会 略微 长 于 后 台 网 站 ， 因 为 必须 安装 所 有 
NPM 软件 包 , 如 果 应 用 程序 使 用 release 模式 , 还 需要 安装 webpack， 
并 生成 所 有 前 端 开发 中 所 使 用 的 TypeScript 类 的 精简 捆绑 版 本 。 

在 部 署 完 这 两 个 应 用 程序 后 ， 资 源 组 将 包含 5 个 项 目 ， 如 图 
9-16 所 示 。 

e@ 两 个 Web 应 用 程序 

e 数据 库 服务 器 和 数据 库 

e@ App Service Plan( 应 用 程序 服务 计划 ) 


口 wwe 


癌 个 Fontendz2ot71217060027 


[x TriathlonRaceTracking20171217052316 
癌 区 triathlonracetracking20171217052316dbserver 


门 区 TriathionRaceTracking20171217052316 db 


DD BB TiathionraceTracking20171217052316Plan 


图 9-16 资源 组 包含 的 内 容 
如 果 你 学 习 本 章 只 是 为 了 测试 ， 记 得 删除 资源 组 以 免 产 生意 外 
的 收费 。 
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9.7 ”本 章 小 结 


本 章 展示 了 如 何 综合 运用 本 书 介绍 的 所 有 技术 ， 构 建 由 一 个 基 
于 “经 典 ”ASPNET Core MVC 技术 的 后 台 网 站 、 一 个 更 现代 的 单 
页 应 用 程序 前 端 和 一 个 REST 服务 构成 的 完备 解决 方案 。 

此 外 ， 还 介绍 了 如 何 将 所 有 内 容 发 布 到 云 服 务 上 ， 以 供 其 他 人 
使 用 。 

本 章 列 出 的 代码 只 不 过 是 本 应 用 程序 的 冰山 一 角 ， 你 可 以 在 笔 
者 的 GitHub 存储 库 中 查阅 全 部 示例 : http://github.com/simonech/ 
TriathlonRaceTracking。 

衷心 希望 你 通过 阅读 ， 能 够 享受 到 和 我 写作 本 书 同 样 的 乐趣 ， 
并 学 会 开发 ASPNET Core 应 用 程序 以 及 掌握 多 种 前 端 开发 技术 。 


